<template>
  <div class="RobotControl">
    <el-row style="width: 100%; height: 66%">
      <el-col :span="13" class="yd-col">
        <div class="basic-information">
          <el-row>
            <el-col :span="16">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">巡检任务名称:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksName()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">任务状态:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksStatus()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">巡检点总数:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksPointTotal()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">异常巡检点数:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksAbnormalPointNum()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">当前巡检点:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksCurrentPointPoint()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">预计巡检时间:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksEstimateTime()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">巡检进度:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksProgress()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <el-row>
                  <el-col style="width: 100px">
                    <span class="item-title">已巡检点数:</span>
                  </el-col>
                  <el-col style="width: calc(100% - 100px)">
                    <span class="item-value">{{getTasksPassPointNum()}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="task-control">
          <el-button
            :class="taskInfo.taskStatus === 3 && robotInfo.robotOneClickReturnStatus != 1 ? 'yd-button' : 'yd-button yd-button-disabled'"
            type="text"
            size="mini"
            @click="handleSuspend"
            :disabled="taskInfo.taskStatus !== 3 || robotInfo.robotOneClickReturnStatus == 1"
          >任务暂停</el-button>
          <el-button
            :class="taskInfo.taskStatus !== 0 && taskInfo.taskStatus !== 4 || robotInfo.robotOneClickReturnStatus == 1 ? 'yd-button' : 'yd-button yd-button-disabled'"
            type="text"
            size="mini"
            @click="handleTermination"
            :disabled="taskInfo.taskStatus === 0 || taskInfo.taskStatus === 4"
          >任务终止</el-button>
          <el-button
            :class="taskInfo.taskStatus === 2 && robotInfo.robotOneClickReturnStatus != 1 ? 'yd-button' : 'yd-button yd-button-disabled'"
            type="text"
            size="mini"
            @click="handleContinue"
            :disabled="taskInfo.taskStatus !== 2 || robotInfo.robotOneClickReturnStatus == 1"
          >任务继续</el-button>
          <el-button
            :class="robotInfo.robotControlModel === 1 || robotInfo.robotControlModel === 2 || robotInfo.robotOneClickReturnStatus == 1 ? 'yd-button yd-button-disabled' : 'yd-button'"
            type="text"
            size="mini"
            @click="handleOnebuttonback"
            :disabled="robotInfo.robotControlModel === 1 || robotInfo.robotControlModel === 2 || robotInfo.robotOneClickReturnStatus == 1"
          >一键返航</el-button>
          <!-- <el-button
              class="yd-button yd-button-disabled"
              type="text"
              size="mini"
              disabled
              @click="handleSelPoint"
          >地图选点</el-button>-->
          <el-button
            :class="robotInfo.robotControlModel === 3 && robotInfo.robotOneClickReturnStatus != 1 ? 'yd-button' : 'yd-button yd-button-disabled'"
            type="text"
            size="mini"
            @click="handleCreateTask"
            :disabled="robotInfo.robotControlModel !== 3 || robotInfo.robotOneClickReturnStatus == 1"
          >创建任务</el-button>
          <!-- <el-button
              class="yd-button yd-button-disabled"
              type="text"
              size="mini"
              disabled
              @click="handleStop"
          >停止</el-button>-->
          <!-- <el-button
              class="yd-button yd-button-disabled"
              type="text"
              size="mini"
              disabled
              @click="handleFullscreen"
          >全屏</el-button>-->
          <!-- <el-button
              class="yd-button yd-button-disabled"
              type="text"
              size="mini"
              disabled
              @click="handleLayer"
          >图层管理</el-button>-->
          <el-dropdown class="yd-dropdown" trigger="click" :hide-on-click="false">
            <span class="yd-dropdown-title">
              图层管理
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-checkbox-group v-model="checkLayerList" @change="handleLayerCheckChange">
                <el-dropdown-item>
                  <el-checkbox :label="1">停靠点</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="2">检测点</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="3">任务停靠点</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="4">任务检测点</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="5">历史路径</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="6">任务路径</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="7">实时路径</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="8">任务起止点</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox :label="9">当前点</el-checkbox>
                </el-dropdown-item>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="robot-map">
          <div class="map-info" id="map_info"></div>
          <!-- <div class="map-control" id="map_control"></div> -->
          <!-- <el-row style="width: 100%; height: 100%;">
              <el-col style="height: 100%;" :span="6">
                <div class="map-data"></div>
              </el-col>
              <el-col style="height: 100%;" :span="18">
                <div class="map-info" id="map_info"></div>
              </el-col>
          </el-row>-->
        </div>
      </el-col>
      <el-col :span="11" class="yd-col">
        <div class="display-information">
          <div class="display-video">
            <div class="video-info">
              <div v-if="isIE" id="divPlugin" class="plugin"></div>
              <video
                v-else
                class="h5video"
                id="videoOutput"
                controls="controls"
                autoplay
                webkit-playsinline
                playsinline
              ></video>
              <!-- <video
                v-else
                class="h5video"
                id="h5sVideo"
                controls="controls"
                autoplay
                webkit-playsinline
                playsinline
              ></video>-->
            </div>
          </div>
          <div class="display-infrared">
            <div class="infrared-info">
              <img class="infrared-img" v-bind:src="infraredImg" alt />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="width: 100%; height: 34%">
      <el-col :span="13" class="yd-col">
        <div class="list-info">
          <el-tabs class="el-tabs-redefine" v-model="editableTabsValue" type="border-card">
            <el-tab-pane label="实时信息" name="first">
              <el-table
                :data="tableData"
                border
                stripe
                size="mini"
                class="robot-info-list"
                style="width: 100%;"
                height="100%"
              >
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="task_name" label="任务名称"></el-table-column>
                <el-table-column prop="name" label="点位名称"></el-table-column>
                <el-table-column prop="recon_time" label="识别时间"></el-table-column>
                <el-table-column prop="value" label="识别结果">
                  <template slot-scope="scope">
                    <span>{{scope.row ? matchArrayContentStr(scope.row.value, meterReadingDealWith) : "未知"}}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop label="审核结果"></el-table-column> -->
                <el-table-column prop="recon_type_name" label="识别类型"></el-table-column>
                <el-table-column label="采集信息">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      class="picture-button"
                      @click.stop="showImage(scope.row.pic_address)"
                      :hidden="!(scope.row && (scope.row.save_type_id === 1 || scope.row.save_type_id === 4))"
                    >红外图片</el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="picture-button"
                      @click.stop="showImage(scope.row.pic_address)"
                      :hidden="!(scope.row && (scope.row.save_type_id === 2))"
                    >可见光图片</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="设备警告信息" name="second">
              <el-table
                :data="deviceAlarmTableData"
                border
                stripe
                size="mini"
                class="robot-info-list"
                style="width: 100%;"
                height="100%"
              >
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="task_name" label="任务名称"></el-table-column>
                <el-table-column prop="name" label="点位名称"></el-table-column>
                <el-table-column prop="recon_time" label="识别时间"></el-table-column>
                <el-table-column prop="value" label="识别结果">
                  <template slot-scope="scope">
                    <span>{{scope.row ? matchArrayContentStr(scope.row.value, meterReadingDealWith) : "未知"}}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop label="审核结果"></el-table-column> -->
                <el-table-column prop="recon_type_name" label="识别类型"></el-table-column>
                <el-table-column label="采集信息">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      class="picture-button"
                      @click.stop="showImage(scope.row.pic_address)"
                      :hidden="!(scope.row && (scope.row.save_type_id === 1 || scope.row.save_type_id === 4))"
                    >红外图片</el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="picture-button"
                      @click.stop="showImage(scope.row.pic_address)"
                      :hidden="!(scope.row && (scope.row.save_type_id === 2))"
                    >可见光图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="alarm_type_name" label="告警类型"></el-table-column>
                <el-table-column prop="alarm_level" label="告警等级">
                  <template slot-scope="scope">
                    <span v-if="scope.row.alarm_level === 1">预告</span>
                    <span v-if="scope.row.alarm_level === 2">一般告警</span>
                    <span v-if="scope.row.alarm_level === 3">严重告警</span>
                    <span v-if="scope.row.alarm_level === 4">危急告警</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="系统警告信息" name="third">
              <el-table
                :data="systemAlarmTableData"
                border
                stripe
                size="mini"
                class="robot-info-list"
                style="width: 100%;"
                height="100%"
              >
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="alarmTypeId" label="报警类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.alarmTypeId === 0">故障报警</span>
                    <span v-if="scope.row.alarmTypeId === 1">越限报警</span>
                    <span v-if="scope.row.alarmTypeId === 2">温升报警</span>
                  </template>
                </el-table-column>
                <el-table-column prop="alarmLevel" label="报警级别">
                  <template slot-scope="scope">
                    <span v-if="scope.row.alarmLevel === 0">正常</span>
                    <span v-if="scope.row.alarmLevel === 1">预警</span>
                    <span v-if="scope.row.alarmLevel === 2">一般告警</span>
                    <span v-if="scope.row.alarmLevel === 3">严重告警</span>
                    <span v-if="scope.row.alarmLevel === 4">危急告警</span>
                  </template>
                </el-table-column>
                <el-table-column prop="alarmDesc" label="报警内容"></el-table-column>
                <!-- <el-table-column prop label="审核结果"></el-table-column> -->
                <el-table-column prop="alarmTime" label="报警时间"></el-table-column>
                <!-- <el-table-column label="采集信息">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="mini"
                        class="picture-button"
                        @click.stop="showImage(scope.row.pic_address)"
                        :hidden="!(scope.row && (scope.row.saveTypeId === 1))"
                      >红外图片</el-button>
                      <el-button
                        type="text"
                        size="mini"
                        class="picture-button"
                        @click.stop="showImage(scope.row.pic_address)"
                        :hidden="!(scope.row && (scope.row.saveTypeId === 2))"
                      >可见光图片</el-button>
                    </template>
                </el-table-column>-->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="自由模式巡检结果" name="four">
              <ul>
                <li
                  class="four-li"
                  v-for="item in tableData"
                  :key="item.id"
                  @click="showImage(item.pic_address)"
                >
                  <div class="four-li-img-consist">
                    <img class="four-li-image" :src="item ? item.pic_address : ''" />
                  </div>
                  <div class="four-li-right">
                    <el-row>
                      <el-col class="info-name">
                        <span>任务名称：</span>
                      </el-col>
                      <el-col class="info-value">
                        <span>{{item ? item.task_name : ""}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col class="info-name">
                        <span>点位名称：</span>
                      </el-col>
                      <el-col class="info-value">
                        <span>{{item ? item.name : ""}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col class="info-name">
                        <span>识别时间：</span>
                      </el-col>
                      <el-col class="info-value">
                        <span>{{item ? item.recon_time : ""}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col class="info-name">
                        <span>识别结果：</span>
                      </el-col>
                      <el-col class="info-value">
                        <span>{{item ? matchArrayContentStr(item.value, meterReadingDealWith) : "未知"}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col class="info-name">
                        <span>识别类型：</span>
                      </el-col>
                      <el-col class="info-value">
                        <span>{{item ? item.recon_type_name : ""}}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col class="info-name">
                        <span>采集信息：</span>
                      </el-col>
                      <el-col class="info-value">
                        <el-button
                          type="text"
                          size="mini"
                          class="picture-button"
                          @click.stop="showImage(item.pic_address)"
                          :hidden="!(item && (item.save_type_id === 1 || item.save_type_id === 4))"
                        >红外图片</el-button>
                        <el-button
                          type="text"
                          size="mini"
                          class="picture-button"
                          @click.stop="showImage(item.pic_address)"
                          :hidden="!(item && (item.save_type_id === 2))"
                        >可见光图片</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="11" class="yd-col">
        <div class="control-information">
          <div class="control-head">
            <el-row style="width: 100%; height: 100%">
              <el-col style="width: 330px; padding: 6px 10px;">
                <div style="margin: 3px 0;">
                  <el-tooltip content="获取控制" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handleControlAuth"
                      :disabled="robotControlAuth == 1 "
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/control.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="抓图" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handleSnapshot"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/pictures.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="开始录音" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/recordingvoice.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip v-if="!bRecord" content="开始录像" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handleRecordStart"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/recordingvideo.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip v-else content="结束录像" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handleRecordStop"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/recordStop.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                </div>
                <div style="margin: 3px 0;">
                  <el-tooltip content="语音对讲" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/voice.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="看图" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handlePreviewSnapshot"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/lookpicture.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="音频回放" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/audio.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="视频回放" placement="top" effect="light">
                    <el-button
                      :class="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1 ? 'head-but head-but-disabled' : 'head-but'"
                      @click="handlePreviewRecord"
                      :disabled="robotControlAuth == 0 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <img
                        class="head-but-img"
                        src="../../../static/resources/images/playback.png"
                        alt
                      />
                    </el-button>
                  </el-tooltip>
                </div>
              </el-col>
              <el-col style="width: 260px; padding: 6px 10px;">
                <div style="margin: 3px 0;">
                  <el-button
                    head-text-but-disabled
                    :class="robotControlAuth == 0 ? 'head-text-but head-text-but-disabled' : (robotInfo.robotControlModel == 0 ? 'head-text-but but-light' : 'head-text-but')"
                    :disabled="robotControlAuth == 0 "
                    @click="taskModel"
                  >任务模式</el-button>
                  <el-button
                    :class="robotControlAuth == 0 ? 'head-text-but head-text-but-disabled' : (robotInfo.robotControlModel == 3 ? 'head-text-but but-light' : 'head-text-but')"
                    :disabled="robotControlAuth == 0 "
                    @click="urgentLocationModel"
                  >紧急定位模式</el-button>
                </div>
                <div style="margin: 3px 0;">
                  <el-button
                    :class="robotControlAuth == 0 ? 'head-text-but head-text-but-disabled' : (robotInfo.robotControlModel == 2 ? 'head-text-but but-light' : 'head-text-but')"
                    :disabled="robotControlAuth == 0 "
                    @click="backControlModel"
                  >后台遥控模式</el-button>
                  <el-button
                    :class="robotControlAuth == 0 ? 'head-text-but head-text-but-disabled' : (robotInfo.robotControlModel == 1 ? 'head-text-but but-light' : 'head-text-but')"
                    :disabled="robotControlAuth == 0 "
                    @click="manualControlModel"
                  >手持遥控模式</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="control-area">
            <el-row class="yd-row">
              <el-col :span="8" class="yd-col">
                <div class="radar-area">
                  <span class="radar-title">雷达</span>
                  <div class="radar"></div>
                </div>
              </el-col>
              <el-col :span="8" class="yd-col">
                <div class="car-area">
                  <div class="div-title">
                    <el-select
                      class="car-title-selected"
                      v-model="selectedSpeed"
                      size="mini"
                      placeholder="请选择"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 || robotInfo.robotOneClickReturnStatus == 1"
                    >
                      <el-option
                        v-for="item in lineSpeeds"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <span>车体控制</span>
                    <el-button
                      :class="'title-left-button ' + (robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'title-left-button-disable' : loopStatus == true ? 'title-left-button-check' : '')"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                      @click="loopStatus = !loopStatus, carRunDirection = ''"
                    >循环</el-button>
                  </div>
                  <div class="car-direction">
                    <el-tooltip
                      content="前进"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                    >
                      <div
                        :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-direction-but car-top-but car-direction-but-disabled ' : carRunDirection == 'forward' ? 'car-direction-but car-top-but car-direction-but-check' : 'car-direction-but car-top-but'"
                        @click="car_Release"
                        @mousedown="carButtonDown('forward')"
                        @mouseup="carButtonUp('forward')"
                        @mouseleave="car_Release"
                        @mouseout="car_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-but-text car-top-but-text car-but-text-disabled' : 'car-but-text car-top-but-text'"
                        >W</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="向右"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                    >
                      <div
                        :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-direction-but car-right-but car-direction-but-disabled' : 'car-direction-but car-right-but'"
                        @click="car_Release"
                        @mousedown="carButtonDown('right')"
                        @mouseup="carButtonUp('right')"
                        @mouseleave="car_Release"
                        @mouseout="car_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-but-text car-right-but-text car-but-text-disabled' : 'car-but-text car-right-but-text'"
                        >D</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="后退"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                    >
                      <div
                        :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-direction-but car-bottom-but car-direction-but-disabled' : carRunDirection == 'backward' ? 'car-direction-but car-bottom-but car-direction-but-check' : 'car-direction-but car-bottom-but'"
                        @click="car_Release"
                        @mousedown="carButtonDown('backward')"
                        @mouseup="carButtonUp('backward')"
                        @mouseleave="car_Release"
                        @mouseout="car_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-but-text car-bottom-but-text car-but-text-disabled' : 'car-but-text car-bottom-but-text'"
                        >S</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="前左"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                    >
                      <div
                        :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-direction-but car-left-but car-direction-but-disabled' : 'car-direction-but car-left-but'"
                        @click="car_Release"
                        @mousedown="carButtonDown('left')"
                        @mouseup="carButtonUp('left')"
                        @mouseleave="car_Release"
                        @mouseout="car_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-but-text car-left-but-text car-but-text-disabled' : 'car-but-text car-left-but-text'"
                        >A</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="停止"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                    >
                      <div
                        :class="robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'car-center-but car-center-but-disabled' : 'car-center-but'"
                        @click="car_Release"
                        @mousedown="carCenter_Down"
                        @mouseup="car_Release"
                        @mouseleave="car_Release"
                        @mouseout="car_Release"
                      >
                        <img
                          class="car-center-but-img"
                          src="../../../static/resources/images/stop.png"
                          alt
                          draggable="false"
                        />
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class="yd-col">
                <div class="holder-area">
                  <div class="div-title">
                    <div style="width: 60px; height: 10px; display: inline-block"></div>
                    <span>云台控制</span>
                    <el-button
                      :class="'title-left-button ' + (robotControlAuth == 0 || robotInfo.robotControlModel != 2 ? 'title-left-button-disable' : isSingle == true ? 'title-left-button-check' : '')"
                      :disabled="robotControlAuth == 0 || robotInfo.robotControlModel != 2 "
                      @click="isSingle = !isSingle"
                    >单点</el-button>
                  </div>
                  <div class="angle-area">
                    <el-row
                      :style="'display: ' + (robotControlAuth == 0 || robotInfo.robotControlModel != 2 || isSingle ? 'none' : 'block')"
                    >
                      <el-col :span="12">
                        <span>垂直</span>
                        <el-input-number
                          class="number-input"
                          v-model="veticalAngle"
                          :min="0"
                          :max="90"
                          size="small"
                          label="描述文字"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="12">
                        <span>水平</span>
                        <el-input-number
                          class="number-input"
                          v-model="horizontalAngle"
                          :min="0"
                          :max="180"
                          size="small"
                          label="描述文字"
                        ></el-input-number>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="holder-direction">
                    <el-tooltip
                      content="左"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                    >
                      <div
                        :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-direction-but holder-left-but holder-direction-but-disabled' : 'holder-direction-but holder-left-but'"
                        @mousedown="holderButtonDown('left')"
                        @mouseup="holderButtonUp('left')"
                        @mouseleave="holder_Release"
                        @mouseout="holder_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-but-text holder-left-but-text holder-but-text-disabled' : 'holder-but-text holder-left-but-text'"
                        >A</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="上"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                    >
                      <div
                        :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-direction-but holder-top-but holder-direction-but-disabled' : 'holder-direction-but holder-top-but'"
                        @mousedown="holderButtonDown('top')"
                        @mouseup="holderButtonUp('top')"
                        @mouseleave="holder_Release"
                        @mouseout="holder_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-but-text holder-top-but-text holder-but-text-disabled' : 'holder-but-text holder-top-but-text'"
                        >W</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="右"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                    >
                      <div
                        :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-direction-but holder-right-but holder-direction-but-disabled' : 'holder-direction-but holder-right-but'"
                        @mousedown="holderButtonDown('right')"
                        @mouseup="holderButtonUp('right')"
                        @mouseleave="holder_Release"
                        @mouseout="holder_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-but-text holder-right-but-text holder-but-text-disabled' : 'holder-but-text holder-right-but-text'"
                        >Ｄ</span>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      content="下"
                      placement="top"
                      effect="light"
                      :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                    >
                      <div
                        :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-direction-but holder-bottom-but holder-direction-but-disabled' : 'holder-direction-but holder-bottom-but'"
                        @mousedown="holderButtonDown('bottom')"
                        @mouseup="holderButtonUp('bottom')"
                        @mouseleave="holder_Release"
                        @mouseout="holder_Release"
                      >
                        <span
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-but-text holder-bottom-but-text holder-but-text-disabled' : 'holder-but-text holder-bottom-but-text'"
                        >Ｓ</span>
                      </div>
                    </el-tooltip>
                    <div class="holder-center-but">
                      <el-tooltip
                        content="变倍"
                        placement="top"
                        effect="light"
                        :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                      >
                        <div
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-left holder-center-left-disabled' : 'holder-center-left'"
                        >
                          <span
                            :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-text holder-center-text-up holder-center-text-disabled' : 'holder-center-text holder-center-text-up'"
                          >+</span>
                          <span
                            :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-text holder-center-text-bot holder-center-text-disabled' : 'holder-center-text holder-center-text-bot'"
                          >变倍</span>
                        </div>
                      </el-tooltip>
                      <el-tooltip
                        content="变焦"
                        placement="top"
                        effect="light"
                        :disabled="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) "
                      >
                        <div
                          :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-right holder-center-right-disabled' : 'holder-center-right'"
                        >
                          <span
                            :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-text holder-center-text-up holder-center-text-disabled' : 'holder-center-text holder-center-text-up'"
                          >-</span>
                          <span
                            :class="robotControlAuth == 0 || (robotInfo.robotControlModel != 2 && robotInfo.robotControlModel != 3) ? 'holder-center-text holder-center-text-bot holder-center-text-disabled' : 'holder-center-text holder-center-text-bot'"
                          >变焦</span>
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      class="el-dialog-redefine"
      width="500px"
      title="提示"
      :visible.sync="authAwaitDialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="15%"
    >
      <div style="width: 100%; height: auto">
        <el-row>
          <el-col style="width: 50px; height: auto">
            <img class="dialog-prompt-icon" src="../../../static/resources/images/prompt.png" alt />
          </el-col>
          <el-col style="width: calc(100% - 50px); height: auto">
            <span style="font-size: 18px; line-height: 30px;">当前已有用户正在控制机器人，请等待。。。</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="width: 100%; height: auto">
            <div
              style="width: 100%; height: 10px; margin: 30px 0 5px 0; padding: 0 5px; text-align: right;"
            ></div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      class="el-dialog-redefine"
      width="500px"
      title="提示"
      :visible.sync="authVerifyDialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="15%"
    >
      <div style="width: 100%; height: auto">
        <el-row>
          <el-col style="width: 50px; height: auto">
            <img class="dialog-prompt-icon" src="../../../static/resources/images/prompt.png" alt />
          </el-col>
          <el-col style="width: calc(100% - 50px); height: auto">
            <span
              style="font-size: 18px; line-height: 30px;"
            >当前正有用户请求控制机器人权限，{{authVerifyIndex}}秒后自动释放，点击“是”立即释放</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="width: 100%; height: auto">
            <div
              style="width: 100%; height: auto; margin: 30px 0 5px 0; padding: 0 5px; text-align: right;"
            >
              <el-button style="width: 80px;" size="small" @click="noControlAuth">否</el-button>
              <el-button style="width: 80px;" size="small" type="primary" @click="yesControlAuth">是</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog title="看图" :visible.sync="previewSnapshotDialogVisible" width="40%">
      <img style="width:100%" :src="previewImg" alt />
    </el-dialog>
    <el-dialog title="视频回放" :visible.sync="previewRecordDialogVisible" width="40%">
      <video style="width:100%" :src="videoRecord" controls="controls">您的浏览器不支持 video 标签。</video>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import h5sRequest from "@/utils/h5sRequest";
import {
  robotsList,
  robotsCurrentTask,
  tasksCurrentPath,
  watchPossList,
  pointsList,
  pointHistoryList,
  pointAlarmRecordList,
  sysPointAlarmHistorysList,
  alarmTypesList,
  robotParams,
  checkControlAuth,
  getControlAuth,
  setControlAuth,
  postOperationLogs,
  currentTaskAlarmNum,
  currentTaskCheckPoints,
  currentTaskWatchPos
} from "@/api/apiManagement";
import { getUserId, setUserId, removeUserId } from "@/utils/auth";
import { clearInterval } from "timers";
import Viewer from "viewerjs";
import { error } from "util";
import { constants } from "zlib";
import {
  matchArrayContent,
  LineSpeeds,
  MeterReadingDealWith
} from "@/utils/constant";
import { getMaptalkBoundaryValueByPointCloudPoint } from "@/utils/maptalksSupport";

export default {
  data() {
    return {
      robot_id: null,
      resource_url: process.env.RESOURCE_URL,
      robotList: [],
      checkLayerList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      //
      robotInfo: {
        robotControlModel: null,
        poseStatus: 0,
        robotOneClickReturnStatus: 0,
        runPath: [],
        runPathPoints: [],
        x: null,
        y: null,
        z: null
      },
      robotSurfacePathPlanning: [],
      //
      taskInfo: {
        abnormalPointNum: 0,
        cumulativeRunTime: 0,
        currentPoint: "",
        passPointNum: 0,
        pathPlanning: null,
        pathPlanningHistorys: null,
        pointTotal: 0,
        restartStartTime: null,
        taskHistoryId: 0,
        taskId: 0,
        taskName: "",
        taskStartTime: "",
        taskStatus: 0,
        totalRunTime: 0,
        progress: 0,
        remainingTime: 0
      },
      //
      editableTabsValue: "first",
      tableData: [],
      deviceAlarmTableData: [],
      systemAlarmTableData: [],
      //
      pointChartPie: null,
      pointOption: {
        title: {
          show: true,
          text: "465",
          x: "center",
          y: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: ["已巡检", "未巡检"]
        },
        series: [
          {
            name: "巡检报告",
            type: "pie",
            radius: ["31%", "46%"],
            label: {
              normal: {
                formatter: "{d}% "
              }
            },
            data: [
              { value: 335, name: "已巡检" },
              { value: 130, name: "未巡检" }
            ]
          }
        ]
      },
      warningChartPie: null,
      warningOption: {
        title: {
          show: true,
          text: "465",
          x: "center",
          y: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: ["已巡检", "未巡检"]
        },
        series: [
          {
            name: "巡检报告",
            type: "pie",
            radius: ["31%", "46%"],
            label: {
              normal: {
                formatter: "{d}% "
              }
            },
            data: [
              { value: 335, name: "已巡检" },
              { value: 40, name: "未巡检" }
            ]
          }
        ]
      },
      rosObj: {
        ip: "",
        port: ""
      },
      // video
      videoObj: {
        ip: "",
        port: "",
        iPrototocol: 1,
        width: "100%",
        height: "100%",
        iWndowType: 1,
        iWndIndex: 0,
        iStreamType: 1,
        iChannelID: 1,
        bZeroChannel: false,
        name: "",
        password: ""
      },
      //
      h5videoBaseUrl: process.env.H5SVIDEO_URL,
      h5videoResUrl: "http://192.168.1.110:8686",
      h5Video: null,
      videoConf: {
        videoid: "h5sVideo",
        protocol: "", //'http:' or 'https:'
        host: "", //'localhost:8080'
        rootpath: "/", // '/' or window.location.pathname
        token: "",
        hlsver: "v1", //v1 is for ts, v2 is for fmp4
        session: "" //session got from login
      },
      // map
      mapImg: "./static/resources/images/map70.png",
      mapMiniImg: "./static/resources/images/map70.png",
      mapObj: null,
      //
      image_layer: null,
      // 停靠点
      stops_point_vector_layer: null,
      stops_point: null,
      // 检测点
      checks_point_vector_layer: null,
      checks_point: null,
      // 任务停靠点
      current_tasks_stopsPoint_vector_layer: null,
      // 任务检测点
      current_tasks_checks_Point_vector_layer: null,
      // 任务历史路径
      current_tasks_historyPath_vector_layer: null,
      current_tasks_history_path: null,
      // 任务路径
      current_tasks_path_vector_layer: null,
      current_tasks_check_path: null,
      current_tasks_return_path: null,
      // 实时路径
      current_tasks_runPath_vector_layer: null,
      current_tasks_run_path: null,
      // 任务起止点
      current_tasks_startEnd_vector_layer: null,
      current_tasks_start_point: null,
      current_tasks_end_point: null,
      // 当前点
      current_point_vector_layer: null,
      current_point: null,
      //
      infraredImg: "",
      //
      intervalTime: null,
      carTime: null,
      holderTime: null,
      //
      webSocket: null,
      robotControlAuth: 0,
      authAwaitDialogVisible: false,
      authVerifyDialogVisible: false,
      authVerifyTime: null,
      authVerifyIndex: 30,

      previewSnapshotDialogVisible: false,
      previewRecordDialogVisible: false,
      previewImg: "",
      videoRecord: "",
      bRecord: false,

      watchPossList: [],
      pointsList: [],
      //判断是否是IE
      isIE: false,
      //
      onebuttonbackTime: null,
      onebuttonbackLoading: null,

      //====Kurento配置=====
      kurento: {
        wsUri: "ws://192.168.1.110:8888/kurento",
        rtspAddress:
          "rtsp://admin:admin12345@192.168.1.64/<videotype>/ch<number>/<streamtype>",
        pipeline: null,
        webRtcPeer: null
      },

      webRtcServer: null,
      rtspAddress: "",
      webrtcAddress: "",

      carCustomBtnTimer: null,
      carCustomBtnLongStatus: false,

      cloudsCustomBtnTimer: null,
      cloudsCustomBtnLongStatus: false,

      circleTime: null,
      selectedSpeed: 0,
      loopStatus: false,
      // 当前正在执行的方向 前后  forward backward
      carRunDirection: "",
      lineSpeeds: LineSpeeds,

      isSingle: true,
      veticalAngle: 0,
      horizontalAngle: 0,
      meterReadingDealWith: MeterReadingDealWith,

      mapCenter: []
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.clearParam();
    this.getAlarmTypes();
    checkControlAuth({}, this.robot_id).then(res => {
      if (res) {
        this.robotControlAuth = res.status;
      }
    });
  },
  mounted() {
    // 加载图标
    // this.initPointChartPie();
    // this.initWarningChartPie();
    // this.initChartLine();
    // 加载视频
    //检查当前浏览器是否为IE
    this.checkIsIE();
    // 加载地图
    this.initMap();
    //
    this.initRos();
    //
    this.monitorsPoint();
    //
    this.getRobotParams({
      page: 1,
      size: 0,
      robotId: this.robot_id,
      type: 3
    });
    this.getRobotsCurrentTask();
    this.getPointsList();
    this.getWatchPossList();
  },
  destroyed() {
    if (this.webSocket) {
      this.webSocket.colse();
    }
    if (this.h5Video != null) {
      this.h5Video.disconnect();
      this.h5Video = null;
    }

    if (this.isIE) {
      this.hkLogout();
    }

    this.inspectedResultWebUnCallBack();
    this.sysAlarmWebUnCallBack();
    this.infraredUnCallBack();
    this.poseUnCallBack();
    this.taskPlanStatusUnCallBack();
    this.taskExecuteStatusUnCallBack();
    this.taskRealStatusWebUnCallBack();
    this.oneButtonTaskStatusUnCallBack();
    this.controlModelStatusUnCallBack();
  },
  methods: {
    //=====kurento======
    k_start() {
      var _that = this;
      var videoOutput = document.getElementById("videoOutput");
      var options = {
        remoteVideo: videoOutput
      };
      _that.kurento.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(
        options,
        function(error) {
          if (error) {
            return console.log(error);
          }
          _that.kurento.webRtcPeer.generateOffer(_that.k_onOffer);
          _that.kurento.webRtcPeer.peerConnection.addEventListener(
            "iceconnectionstatechange",
            function(event) {
              if (
                _that.kurento.webRtcPeer &&
                _that.kurento.webRtcPeer.peerConnection
              ) {
                console.log(
                  "oniceconnectionstatechange -> " +
                    _that.kurento.webRtcPeer.peerConnection.iceConnectionState
                );
                console.log(
                  "icegatheringstate -> " +
                    _that.kurento.webRtcPeer.peerConnection.iceGatheringState
                );
              }
            }
          );
        }
      );
    },
    k_onOffer(error, sdpOffer) {
      var _that = this;
      if (error) return this.k_onError(error);
      kurentoClient(_that.kurento.wsUri, function(error, kurentoClient) {
        if (error) return _that.k_onError(error);

        kurentoClient.create("MediaPipeline", function(error, p) {
          if (error) return _that.k_onError(error);

          _that.kurento.pipeline = p;

          _that.kurento.pipeline.create(
            "PlayerEndpoint",
            {
              networkCache: 1000,
              uri: _that.kurento.rtspAddress
            },
            function(error, player) {
              if (error) return _that.k_onError(error);

              _that.kurento.pipeline.create("WebRtcEndpoint", function(
                error,
                webRtcEndpoint
              ) {
                if (error) return _that.k_onError(error);

                _that.k_setIceCandidateCallbacks(
                  webRtcEndpoint,
                  _that.kurento.webRtcPeer,
                  _that.k_onError
                );

                webRtcEndpoint.processOffer(sdpOffer, function(
                  error,
                  sdpAnswer
                ) {
                  if (error) return _that.k_onError(error);

                  webRtcEndpoint.gatherCandidates(_that.k_onError);

                  _that.kurento.webRtcPeer.processAnswer(sdpAnswer);
                });

                player.connect(webRtcEndpoint, function(error) {
                  if (error) return _that.k_onError(error);

                  console.log(
                    "PlayerEndpoint-->WebRtcEndpoint connection established"
                  );

                  player.play(function(error) {
                    if (error) return _that.k_onError(error);
                    console.log("Player playing ...");
                  });
                });
              });
            }
          );
        });
      });
    },
    k_stop() {
      if (this.kurento.webRtcPeer) {
        this.kurento.webRtcPeer.dispose();
        this.kurento.webRtcPeer = null;
      }
      if (this.kurento.pipeline) {
        this.kurento.pipeline.release();
        this.kurento.pipeline = null;
      }
      var videoOutput = document.getElementById("videoOutput");
    },
    k_setIceCandidateCallbacks(webRtcEndpoint, webRtcPeer, onError) {
      var _that = this;
      webRtcPeer.on("icecandidate", function(candidate) {
        console.log("Local icecandidate " + JSON.stringify(candidate));

        candidate = kurentoClient.register.complexTypes.IceCandidate(candidate);

        webRtcEndpoint.addIceCandidate(candidate, _that.k_onError);
      });
      webRtcEndpoint.on("OnIceCandidate", function(event) {
        var candidate = event.candidate;

        console.log("Remote icecandidate " + JSON.stringify(candidate));

        webRtcPeer.addIceCandidate(candidate, _that.k_onError);
      });
    },
    k_onError(error) {
      if (error) {
        console.log(error);
        this.k_stop();
      }
    },
    //===========
    checkIsIE() {
      var ieVersion = this.ieVersion();
      if (ieVersion == -1) {
        this.isIE = false;
      } else {
        this.isIE = true;
      }
    },
    ieVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE =
        userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
      var isIE11 =
        userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
      if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
          return 7;
        } else if (fIEVersion == 8) {
          return 8;
        } else if (fIEVersion == 9) {
          return 9;
        } else if (fIEVersion == 10) {
          return 10;
        } else {
          return 6; //IE版本<=7
        }
      } else if (isEdge) {
        return "edge"; //edge
      } else if (isIE11) {
        return 11; //IE11
      } else {
        return -1; //不是ie浏览器
      }
    },
    noControlAuth() {
      setControlAuth({ handleStatus: 0 }, this.robot_id).then(res => {
        //
      });
      this.authVerifyDialogVisible = false;
      window.clearInterval(this.authVerifyTime);
    },
    yesControlAuth() {
      setControlAuth({ handleStatus: 1 }, this.robot_id).then(res => {
        //
      });
      this.robotControlAuth = 0;
      this.authVerifyDialogVisible = false;
      window.clearInterval(this.authVerifyTime);
    },
    handleSnapshot() {
      if (this.isIE) {
        this.hkHandleSnapshot();
      } else {
        this.h5HandleSnapshot();
      }
    },
    handleRecordStart() {
      if (this.isIE) {
        this.hkHandleRecordStart();
      } else {
        this.h5HandleRecordStart();
      }
    },
    handleRecordStop() {
      if (this.isIE) {
        this.hkHandleRecordStop();
      } else {
        this.h5HandleRecordStop();
      }
    },
    handlePreviewSnapshot() {
      if (this.isIE) {
        this.hkHandlePreviewSnapshot();
      } else {
        this.h5HandlePreviewSnapshot();
      }
    },
    handlePreviewRecord() {
      if (this.isIE) {
        this.hkHandlePreviewRecord();
      } else {
        this.h5HandlePreviewRecord();
      }
    },
    hkHandleSnapshot() {
      var timestamp = new Date().getTime();
      var img = timestamp + ".jpg";
      var iRet = WebVideoCtrl.I_CapturePic(img, {
        bDateDir: true //是否生成日期文件
      });

      if (0 == iRet) {
        this.$message({
          message: "抓图成功!",
          type: "success"
        });
      } else {
        this.$message({
          message: "抓图失败!",
          type: "warning"
        });
      }
    },
    hkHandleRecordStart() {
      var _that = this;
      var szFileName = new Date().getTime();
      WebVideoCtrl.I_StartRecord(szFileName, {
        bDateDir: true, //是否生成日期文件
        success: function() {
          _that.bRecord = true;
          _that.$message({
            message: "录像开始!",
            type: "success"
          });
        },
        error: function() {
          console.log("开始录像失败");
        }
      });
    },
    hkHandleRecordStop() {
      var _that = this;
      WebVideoCtrl.I_StopRecord({
        success: function() {
          _that.bRecord = false;
          _that.$message({
            message: "录像结束!",
            type: "success"
          });
        },
        error: function() {
          console.log("停止录像失败");
        }
      });
    },
    hkHandlePreviewSnapshot() {
      var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
      var filePath = $(xmlDoc)
        .find("CapturePath")
        .eq(0)
        .text();
      this.$notify({
        title: "抓图预览",
        message: filePath,
        position: "bottom-right",
        duration: 5000
      });
    },
    hkHandlePreviewRecord() {
      var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
      var filePath = $(xmlDoc)
        .find("RecordPath")
        .eq(0)
        .text();
      this.$notify({
        title: "视频录像",
        message: filePath,
        position: "bottom-right",
        duration: 5000
      });
    },

    h5HandleSnapshot() {
      var url =
        this.h5videoBaseUrl +
        "/api/v1/Snapshot?token=" +
        this.videoConf.token +
        "&session=" +
        this.videoConf.session;

      h5sRequest
        .get(url)
        .then(result => {
          console.log(result);
          if (result.status == 200) {
            var data = result.data;
            localStorage.setItem("Snapshot", data.strUrl);
            this.$message({
              message: "拍照成功!",
              type: "success"
            });
          }
        })
        .catch(error => {
          console.log("GetSnapshot failed", error);
        });
    },
    h5HandleRecordStart() {
      var url =
        this.h5videoBaseUrl +
        "/api/v1/ManualRecordStart?token=" +
        this.videoConf.token +
        "&session=" +
        this.videoConf.session;
      h5sRequest
        .get(url)
        .then(result => {
          if (result.status == 200) {
            var data = result.data;
            if (data.bStatus == true) {
              localStorage.setItem("record", data.strUrl);
              this.bRecord = true;
              this.$message({
                message: "录像开始!",
                type: "success"
              });
            }
          }
        })
        .catch(error => {
          console.log("GetSnapshot failed", error);
        });
    },
    h5HandleRecordStop() {
      var url =
        this.h5videoBaseUrl +
        "/api/v1/ManualRecordStop?token=" +
        this.videoConf.token +
        "&session=" +
        this.videoConf.session;
      h5sRequest
        .get(url)
        .then(result => {
          if (result.status == 200) {
            var data = result.data;
            if (data.bStatus == true) {
              this.bRecord = false;
              this.$message({
                message: "录像结束!",
                type: "success"
              });
            }
          }
        })
        .catch(error => {
          console.log("GetSnapshot failed", error);
        });
    },
    h5HandlePreviewSnapshot() {
      this.previewSnapshotDialogVisible = true;
      this.previewImg = this.h5videoResUrl + localStorage.getItem("Snapshot");
    },
    h5HandlePreviewRecord() {
      this.previewRecordDialogVisible = true;
      this.videoRecord = this.h5videoResUrl + localStorage.getItem("record");
    },
    h5sVideoGetStr() {
      var url =
        this.h5videoBaseUrl +
        "/api/v1/GetSrc?token=" +
        this.videoConf.token +
        "&session=" +
        this.videoConf.session;
      h5sRequest
        .get(url)
        .then(result => {
          console.log(result);
          if (result.status == 200) {
            var data = result.data;
            this.bRecord = data.bRec;
          }
        })
        .catch(error => {
          console.log("GetSnapshot failed", error);
        });
    },
    handleControlAuth(param, robotId) {
      var userId = "";
      userId = getUserId();
      // 创建websocket实例
      if (
        this.webSocket &&
        this.webSocket.readyState === WebSocket.CONNECTING &&
        this.webSocket.readyState === WebSocket.OPEN
      ) {
        //
      } else {
        this.webSocket = new WebSocket(
          "ws://" + process.env.CONTROL_WEBSOCKET + userId
        );
        this.webSocket.onopen = event => {};
        this.webSocket.onmessage = event => {
          if (event && event.data) {
            if (event.data.indexOf("cmd") != -1) {
              var data = JSON.parse(event.data);
              if (data && data.cmd === "requestAuth") {
                this.authVerifyDialogVisible = true;
                this.authVerifyIndex = 30;
                window.clearInterval(this.authVerifyTime);
                this.authVerifyTime = setInterval(() => {
                  this.authVerifyIndex--;
                  if (this.authVerifyIndex <= 0) {
                    setControlAuth({ handleStatus: 1 }, this.robot_id).then(
                      res => {}
                    );
                    this.robotControlAuth = 0;
                    this.authVerifyDialogVisible = false;
                    window.clearInterval(this.authVerifyTime);
                  }
                }, 1000);
              }
              if (data && data.cmd === "responseAuth") {
                this.authAwaitDialogVisible = false;
                if (data.code === "1") {
                  this.setOperationLogs("获取-机器人控制");
                  this.robotControlAuth = 1;
                  this.$message({
                    message: "获取控制权限成功!",
                    type: "success"
                  });
                } else {
                  this.robotControlAuth = 0;
                  this.$message({
                    message: "获取权限失败，对方未同意释放权限,请稍后再试!",
                    type: "warning"
                  });
                }
              }
            }
          }
        };
        // 关闭回调
        this.webSocket.onclose = event => {};
      }
      checkControlAuth({}, this.robot_id).then(res => {
        if (res && res.status === 1) {
          this.$message("当前已经存在控制权限!");
        } else {
          getControlAuth({}, this.robot_id).then(response => {
            if (response && response.status === 1) {
              this.setOperationLogs("获取-机器人控制");
              this.robotControlAuth = response.status;
              this.$message({
                message: "获取控制权限成功!",
                type: "success"
              });
            } else {
              this.authAwaitDialogVisible = true;
            }
          });
        }
      });
    },
    // js文件动态加载
    loadJs(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = "async";
      script.src = url;
      document.body.appendChild(script);
      if (typeof callback != "undefined") {
        if (script.readyState) {
          script.onreadystatechange = function() {
            if (
              script.readyState == "loaded" ||
              script.readyState == "complete"
            ) {
              script.onreadystatechange = null;
              callback(); // 加载完成回调
            }
          };
        } else {
          script.onload = function() {
            callback(); // 加载完成回调
          };
        }
      }
    },
    //参数value判断的字符串 m最小值 n最大值
    isRangeIn(value, minNum, maxNum) {
      var num = parseFloat(value);

      if (num <= maxNum && num >= minNum) {
        return true;
      }

      return false;
    },
    // 加载图表
    initPointChartPie() {
      this.pointChartPie = echarts.init(
        document.getElementById("pointChartPie")
      );
      this.pointChartPie.setOption(this.pointOption);
    },
    // 加载图表
    initWarningChartPie() {
      this.warningChartPie = echarts.init(
        document.getElementById("warningChartPie")
      );
      this.warningChartPie.setOption(this.warningOption);
    },
    initRos() {
      //
      this.inspectedResultWebCallBack(message => {
        console.log("robotInspectedResultWeb", message);
        //
        let messageData = message;
        messageData.pic_address = this.resource_url + messageData.pic_address;
        if (messageData.alarm_type_id == 0) {
          messageData.alarm_type_name = "正常";
        }
        if (messageData.alarm_type_id == 1) {
          messageData.alarm_type_name = "超温报警";
        }
        if (messageData.alarm_type_id == 2) {
          messageData.alarm_type_name = "温升报警";
        }
        if (messageData.alarm_type_id == 3) {
          messageData.alarm_type_name = "三相对比报警";
        }
        if (messageData.alarm_type_id == 4) {
          messageData.alarm_type_name = "三相温差报警";
        }
        if (messageData.alarm_type_id == 5) {
          messageData.alarm_type_name = "越限报警";
        }
        //
        if (this.tableData.some(item => item.point_id == message.point_id)) {
          //
        } else {
          this.taskInfo.currentPoint.id = message.point_id;
          this.taskInfo.passPointNum += 1;
          this.taskInfo.currentPoint.name = message.name;
          //
          this.tableData.unshift(messageData);
          if (this.tableData.length >= 100) {
            // this.tableData.splice(this.tableData.length - 1, 1);
          }
        }
        if (messageData.alarm_level !== 0) {
          if (
            !this.deviceAlarmTableData.some(
              item => item.point_id == message.point_id
            )
          ) {
            this.taskInfo.abnormalPointNum += 1;
          }

          this.deviceAlarmTableData.unshift(messageData);
          this.getCurrentTaskAlarmNum({
            robotId: this.robot_id
          });
          if (this.deviceAlarmTableData.length >= 100) {
            // this.deviceAlarmTableData.splice(
            //   this.deviceAlarmTableData.length - 1,
            //   1
            // );
          }
        }
      });
      //
      this.sysAlarmWebCallBack(message => {
        console.log("robotSysAlarmWeb", message);
        this.systemAlarmTableData.unshift(message);
        if (this.systemAlarmTableData.length >= 30) {
          this.systemAlarmTableData.splice(
            this.systemAlarmTableData.length - 1,
            1
          );
        }
      });
      //
      this.infraredCallBack(message => {
        // console.log("robotInfrared", message);
        this.infraredImg = "data:image/jpeg;base64," + message.data;
      });
      //
      this.poseCallBack(message => {
        // console.log("robotPose", message);
        this.robotInfo.poseStatus = 1;
        this.robotInfo.x = message.x;
        this.robotInfo.y = message.y;
        this.robotInfo.z = message.z;
        //
        this.addCurrentPoint(message);
        //
        if (
          this.taskInfo &&
          this.taskInfo.pathPlanning &&
          this.taskInfo.pathPlanning.path
        ) {
          var temp = JSON.parse(this.taskInfo.pathPlanning.path);
          this.realtimePath(temp.Tasks, {
            x: message.x,
            y: message.y,
            z: message.z
          });
        }
      });
      //
      this.taskPlanStatusCallBack(message => {
        console.log("robotTaskPlanStatus", message);
        if (message.status == 1) {
          this.taskInfo.taskStatus = 4;
        }
      });
      //
      this.taskExecuteStatusCallBack(message => {
        console.log("robotTaskExecuteStatus", message);
        // 0:任务完成 1:任务开始 2:任务暂停 3:任务继续 4:任务清除
      });
      //
      this.taskRealStatusWebCallBack(message => {
        console.log("robotTaskRealStatusWeb", message);
        // 任务状态 0:已执行 1:终止 2:暂停 3:正在执行 4:未执行 5:超期 6:预执行
        this.taskInfo.taskStatus = message.task_status;
        if (this.taskInfo.taskStatus == 2) {
          this.realtimePath([], { x: 0, y: 0, z: 0 });
        }
        if (message.task_status == 0) {
          this.taskInfo.cumulativeRunTime = this.taskInfo.totalRunTime;
        }
        let timeoutTimer = window.setTimeout(() => {
          if (message.task_status == 3) {
            this.getRobotsCurrentTask();
          }
        }, 3000);
      });
      //
      this.oneButtonTaskStatusCallBack(message => {
        console.log("robotOneButtonTaskStatus", message);
        if (this.robot_id == message.robotId) {
          this.robotInfo.robotOneClickReturnStatus = message.status;
          let timeoutTimer = window.setTimeout(() => {
            if (message.status == 1) {
              this.onebuttonbackLoading.close();
              clearTimeout(this.onebuttonbackTime);
              this.getRobotsCurrentTask();
            }
          }, 3000);
        }
      });
      //
      this.controlModelStatusCallBack(message => {
        // console.log("robotControlMode", message);
        if (message.robot_id == this.robot_id) {
          this.robotInfo.robotControlModel = message.mode;
          if (this.robotInfo.robotControlModel != 2) {
            this.loopStatus = false;
            this.carRunDirection = "";
            window.clearInterval(this.circleTime);
            this.isSingle = true;
          }
        }
      });
    },
    initVisibleLight() {
      var _that = this;
      //如何当前浏览器为IE则调用海康，否则调用h5stream
      if (this.isIE) {
        console.log("浏览器版本：IE");
        this.videoInitPlugin();
      } else {
        console.log("浏览器版本：非IE");
        this.webRtcServer = new WebRtcStreamer(
          "videoOutput",
          _that.webrtcAddress
        );
        this.webRtcServer.connect(
          _that.rtspAddress,
          "",
          "rtptransport=tcp&timeout=60"
        );
        // this.k_start();
        // if (this.h5Video != null) {
        //   this.h5Video.disconnect();
        //   this.h5Video = null;
        // }
        // if (this.videoConf.host === "" || this.videoConf.token === "") {
        //   return;
        // }
        // this.h5Video = new H5sPlayerRTC(this.videoConf);
        // this.h5Video.connect();
        // if (this.h5videoBaseUrl != "") {
        //   this.h5sVideoGetStr();
        // }
      }
    },
    videoInitPlugin: function() {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();

      if (iRet === -1) {
        alert("您还未安装过插件，请下载WebComponentsKit.exe进行安装！");
        this.downLoadPlugin();
        return;
      }
      this.initPlugin();
    },
    initPlugin: function() {
      var _that = this;
      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin(this.videoObj.width, this.videoObj.height, {
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        iPackageType: 11,
        cbInitPluginComplete: function() {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

          // 登录设备
          WebVideoCtrl.I_Login(
            _that.videoObj.ip,
            _that.videoObj.iPrototocol,
            _that.videoObj.port,
            _that.videoObj.name,
            _that.videoObj.password,
            {
              success: function(xmlDoc) {
                // 开始预览
                var szDeviceIdentify =
                  _that.videoObj.ip + "_" + _that.videoObj.port;
                setTimeout(function() {
                  WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                    iStreamType: _that.videoObj.iStreamType,
                    iChannelID: _that.videoObj.iChannelID,
                    bZeroChannel: _that.videoObj.bZeroChannel
                  });
                }, 1000);
                console.log("可见光视频加载成功");
              },
              error: function(status, xmlDoc) {
                console.log("可见光视频登录失败！", status, xmlDoc);
              }
            }
          );
        }
      });
    },
    downLoadPlugin: function() {
      if (confirm("是否下载该插件?")) {
        window.location.href =
          process.env.HKPLUG_URL + "/hk32/WebComponentsKit.exe";
      }
    },
    hkLogout: function() {
      var szDeviceIdentify = this.videoObj.ip + "_" + this.videoObj.port;
      WebVideoCtrl.I_Stop();
      var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
      if (0 == iRet) {
        console.log("退出成功！");
      } else {
        console.log("退出失败！");
      }
    },
    // maptalks
    initMap() {
      this.mapCenter = [ -10, 40];
      var boundaryValue = getMaptalkBoundaryValueByPointCloudPoint(
        { x: 60, y: 30 },
        { x: -10, y: -5 }
      );

      this.mapObj = new maptalks.Map("map_info", {
        center: [0, 0],
        zoom: 2,
        maxZoom: 6,
        zoomControl: true,
        pitch: 0,
        bearing: 0,
        //     baseLayer: new maptalks.TileLayer('base', {
        //         urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        //         subdomains: ['a', 'b', 'c'],
        //         attribution: '&copy; <a href="http://www.osm.org" target="_blank">OpenStreetMap</a> contributors'
        //     })
        spatialReference: {
          projection: "identity",
          resolutions: (function() {
            const resolutions = [];
            for (let i = 0; i < 13; i++) {
              resolutions[i] = 180 / (Math.pow(2, i) * 128);
            }
            return resolutions;
          })(),
          fullExtent: {
            top: boundaryValue.ymax,
            left: boundaryValue.xmin,
            bottom: boundaryValue.ymin,
            right: boundaryValue.xmax
          }
        }
        // layers: [],
        // layerSwitcherControl: {
        //   position: "top-right",
        //   // title of base layers
        //   baseTitle: "Base Layers",
        //   // title of layers
        //   overlayTitle: "Layers",
        //   // layers you don't want to manage with layer switcher
        //   excludeLayers: ["image_layer"],
        //   // css class of container element, maptalks-layer-switcher by default
        //   containerClass: "maptalks-layer-switcher"
        // }
      });

      this.image_layer = new maptalks.ImageLayer(
        "image_layer",
        [
          {
            url: this.mapImg,
            extent: [
              boundaryValue.xmin,
              boundaryValue.ymin,
              boundaryValue.xmax,
              boundaryValue.ymax
            ],
            opacity: 0
          }
        ]
        // {
        //   minZoom: 5,
        //   maxZoom: 7
        // }
      );
      this.mapObj.addLayer(this.image_layer); // or this.image_layer.addTo(this.mapObj)
      //
      // this.stops_point_vector_layer = new maptalks.VectorLayer(
      //   "stops_point_vector_layer"
      // ).addTo(this.mapObj);
      // this.checks_point_vector_layer = new maptalks.VectorLayer(
      //   "checks_point_vector_layer"
      // ).addTo(this.mapObj);
      this.stops_point_vector_layer = new maptalks.ClusterLayer(
        "stops_point_vector_layer",
        [],
        {
          noClusterWithOneMarker: false,
          maxClusterRadius: 30,
          maxClusterZoom: 4,
          symbol: {
            markerType: "ellipse",
            markerFill: {
              property: "count",
              type: "interval",
              stops: [[0, "#109cb4"]]
            },
            markerFillOpacity: 0.8,
            markerLineWidth: 0,
            // markerLineOpacity: 1,
            // markerLineColor: "#fff",
            markerWidth: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            },
            markerHeight: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            }
          },
          textSymbol: {
            textSize: 13,
            textFill: "#fff",
            textAlign: "center"
          },
          drawClusterText: true,
          single: true
        }
      ).addTo(this.mapObj);
      this.checks_point_vector_layer = new maptalks.ClusterLayer(
        "checks_point_vector_layer",
        [],
        {
          noClusterWithOneMarker: false,
          maxClusterRadius: 30,
          maxClusterZoom: 4,
          symbol: {
            markerType: "ellipse",
            markerFill: {
              property: "count",
              type: "interval",
              stops: [[0, "#F5BE00"]]
            },
            markerFillOpacity: 0.8,
            markerLineWidth: 0,
            // markerLineOpacity: 1,
            // markerLineColor: "#fff",
            markerWidth: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            },
            markerHeight: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            }
          },
          textSymbol: {
            textSize: 13,
            textFill: "#fff",
            textAlign: "center"
          },
          drawClusterText: true,
          single: true
        }
      ).addTo(this.mapObj);
//
      this.current_tasks_stopsPoint_vector_layer = new maptalks.ClusterLayer(
        "current_tasks_stopsPoint_vector_layer",
        [],
        {
          noClusterWithOneMarker: false,
          maxClusterRadius: 30,
          maxClusterZoom: 4,
          symbol: {
            markerType: "ellipse",
            markerFill: {
              property: "count",
              type: "interval",
              stops: [[0, "#109cb4"]]
            },
            markerFillOpacity: 0.8,
            markerLineWidth: 0,
            // markerLineOpacity: 1,
            // markerLineColor: "#fff",
            markerWidth: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            },
            markerHeight: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            }
          },
          textSymbol: {
            textSize: 13,
            textFill: "#fff",
            textAlign: "center"
          },
          drawClusterText: true,
          single: true
        }
      ).addTo(this.mapObj);
      this.current_tasks_checks_Point_vector_layer = new maptalks.ClusterLayer(
        "current_tasks_checks_Point_vector_layer",
        [],
        {
          noClusterWithOneMarker: false,
          maxClusterRadius: 30,
          maxClusterZoom: 4,
          symbol: {
            markerType: "ellipse",
            markerFill: {
              property: "count",
              type: "interval",
              stops: [[0, "#F5BE00"]]
            },
            markerFillOpacity: 0.8,
            markerLineWidth: 0,
            // markerLineOpacity: 1,
            // markerLineColor: "#fff",
            markerWidth: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            },
            markerHeight: {
              property: "count",
              type: "interval",
              stops: [[0, 17], [10, 21], [100, 25], [1000, 30]]
            }
          },
          textSymbol: {
            textSize: 13,
            textFill: "#fff",
            textAlign: "center"
          },
          drawClusterText: true,
          single: true
        }
      ).addTo(this.mapObj);
      this.current_tasks_historyPath_vector_layer = new maptalks.VectorLayer(
        "current_tasks_historyPath_vector_layer"
      ).addTo(this.mapObj);
      this.current_tasks_path_vector_layer = new maptalks.VectorLayer(
        "current_tasks_path_vector_layer"
      ).addTo(this.mapObj);
      this.current_tasks_runPath_vector_layer = new maptalks.VectorLayer(
        "current_tasks_runPath_vector_layer"
      ).addTo(this.mapObj);
      this.current_tasks_startEnd_vector_layer = new maptalks.VectorLayer(
        "current_tasks_startEnd_vector_layer"
      ).addTo(this.mapObj);
      this.current_point_vector_layer = new maptalks.VectorLayer(
        "current_point_vector_layer"
      ).addTo(this.mapObj);
      var toolbar = new maptalks.control.Toolbar({
        height: 38,
        items: [
          {
            item:
              '<div style="height: 38px">' +
              '<img style="margin-top:9px; height: 20px; width: 20px" src=static/resources/images/reset_white.png></img>' +
              "</div>",
            click: () => {
              this.mapObj.setPitch(0);
              this.mapObj.setBearing(0);
              this.mapObj.setZoom(3);
              this.mapObj.setCenter(this.mapCenter);
            }
          }
        ]
      }).addTo(this.mapObj);
      //
      this.mapObj.setMaxExtent({
        xmax: boundaryValue.xmax,
        xmin: boundaryValue.xmin,
        ymax: boundaryValue.ymax,
        ymin: boundaryValue.ymin
      });
      this.mapObj.fitExtent(
        {
          xmax: boundaryValue.xmax,
          xmin: boundaryValue.xmin,
          ymax: boundaryValue.ymax,
          ymin: boundaryValue.ymin
        },
        0
      );
      //
      this.mapObj.on("click", function(param) {
        // console.log(param);
      });
      this.mapObj.on("zoomend", param => {
        // if (this.isRangeIn(this.mapObj.getZoom(), 0, 4)) {
        //   this.image_layer.setImages([
        //     {
        //       url: this.mapMiniImg,
        //       // extent: [-180, -90, 180, 90],
        //       extent: [-40, -20, 20, 10],
        //       opacity: 0
        //     }
        //   ]);
        // }
        // if (this.isRangeIn(this.mapObj.getZoom(), 5, 7)) {
        //   this.image_layer.setImages([
        //     {
        //       url: this.mapImg,
        //       // extent: [-180, -90, 180, 90],
        //       extent: [-40, -20, 20, 10],
        //       opacity: 0
        //     }
        //   ]);
        // }
        // if (this.isRangeIn(this.mapObj.getZoom(), 8, 12)) {
        //   //
        // }
      });
    },
    // 添加停靠点聚合方式
    getStopsPoint(data) {
      var markers = [];
      markers = data.map(item => {
        var marker = new maptalks.Marker([item.x, item.y], {
          visible: true,
          editable: true,
          cursor: "pointer",
          shadowBlur: 0,
          shadowColor: "black",
          draggable: false,
          dragShadow: false, // display a shadow during dragging
          drawOnAxis: null, // force dragging stick on a axis, can be: x, y
          symbol: {
            markerFile: "../../static/resources/images/stopsPoint.png",
            markerWidth: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            },
            markerHeight: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            }
          }
        });
        return marker;
      });

      return markers;
    },
    // 添加检测点聚合方式
    getChecksPoint(data) {
      var markers = [];
      markers = data.map(item => {
        var marker = new maptalks.Marker([item.x, item.y], {
          visible: true,
          editable: true,
          cursor: "pointer",
          shadowBlur: 0,
          shadowColor: "black",
          draggable: false,
          dragShadow: false, // display a shadow during dragging
          drawOnAxis: null, // force dragging stick on a axis, can be: x, y
          symbol: {
            markerFile: "../../static/resources/images/checksPoint.png",
            markerWidth: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            },
            markerHeight: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            }
          }
        });
        marker.setInfoWindow({
          content: item.displayName,
          width: 200
        });
        marker.on("click", this.onclick);
        return marker;
      });
      return markers;
    },

    onclick(e) {
      e.target.openInfoWindow();
    },

    // 添加任务历史路径
    addHistoryPath(data) {
      var lineArr = [];
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].TLocType !== "end") {
          var temp = data[i].TLoc.split(";");
          lineArr.push({
            x: temp[0],
            y: temp[2]
          });
        } else {
          if (this.robotInfo.robotOneClickReturnStatus == 1) {
            var temp = data[i].TLoc.split(";");
            lineArr.push({
              x: temp[0],
              y: temp[2]
            });
          }
        }
      }
      this.current_tasks_history_path = new maptalks.LineString(lineArr, {
        id: "current_tasks_history_path",
        symbol: {
          lineColor: "#FF0000",
          lineWidth: 5,
          lineJoin: "round", //miter, round, bevel
          lineCap: "round", //butt, round, square
          lineDasharray: null, //dasharray, e.g. [10, 5, 5]
          lineOpacity: 1
        }
      }).addTo(this.current_tasks_historyPath_vector_layer);
    },
    // 添加任务检测路径
    addCheckPath(data) {
      if (
        this.current_tasks_path_vector_layer.getGeometryById(
          "current_tasks_check_path"
        )
      ) {
        // this.current_tasks_path_vector_layer.removeGeometry(
        //   this.current_tasks_check_path
        // );
        this.current_tasks_check_path.setCoordinates(data);
      } else {
        this.current_tasks_check_path = new maptalks.LineString(data, {
          id: "current_tasks_check_path",
          symbol: {
            linePatternFile: "../../static/resources/images/lineRight.png",
            lineWidth: {
              stops: [[1, 2], [5, 7], [9, 12], [12, 15]]
            }
          },
          smoothness: 0
        });
        this.current_tasks_path_vector_layer.addGeometry([
          this.current_tasks_check_path
        ]);
      }
    },
    // 添加任务返回路径
    addReturnPath(data) {
      if (
        this.current_tasks_path_vector_layer.getGeometryById(
          "current_tasks_return_path"
        )
      ) {
        // this.current_tasks_path_vector_layer.removeGeometry(
        //   this.current_tasks_return_path
        // );
        this.current_tasks_return_path.setCoordinates(data);
      } else {
        this.current_tasks_return_path = new maptalks.LineString(data, {
          id: "current_tasks_return_path",
          symbol: {
            linePatternFile: "../../static/resources/images/lineRight.png",
            lineWidth: {
              stops: [[1, 2], [5, 7], [9, 12], [12, 15]]
            }
          },
          smoothness: 0
        });
        this.current_tasks_path_vector_layer.addGeometry([
          this.current_tasks_return_path
        ]);
      }
    },
    // 添加任务起点
    addStartPoint(data) {
      if (
        this.current_tasks_startEnd_vector_layer.getGeometryById(
          "current_tasks_start_point"
        )
      ) {
        // this.current_tasks_startEnd_vector_layer.removeGeometry(
        //   this.current_tasks_start_point
        // );
        this.current_tasks_start_point.setCoordinates([data.x, data.y]);
      } else {
        this.current_tasks_start_point = new maptalks.Marker([data.x, data.y], {
          id: "current_tasks_start_point",
          symbol: {
            markerFile: "../../static/resources/images/startPoint.png",
            markerWidth: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            },
            markerHeight: {
              stops: [[1, 7], [5, 25], [9, 35], [12, 43]]
            }
          }
        });
        this.current_tasks_startEnd_vector_layer.addGeometry([
          this.current_tasks_start_point
        ]);
      }
    },
    // 添加任务终点
    addEndPoint(data) {
      if (
        this.current_tasks_startEnd_vector_layer.getGeometryById(
          "current_tasks_end_point"
        )
      ) {
        // this.current_tasks_startEnd_vector_layer.removeGeometry(
        //   this.current_tasks_end_point
        // );
        this.current_tasks_end_point.setCoordinates([data.x, data.y]);
      } else {
        this.current_tasks_end_point = new maptalks.Marker([data.x, data.y], {
          id: "current_tasks_end_point",
          symbol: {
            markerFile: "../../static/resources/images/endPoint.png",
            markerWidth: {
              stops: [[1, 6], [5, 20], [9, 30], [12, 36]]
            },
            markerHeight: {
              stops: [[1, 7], [5, 25], [9, 35], [12, 43]]
            }
          }
        });
        this.current_tasks_startEnd_vector_layer.addGeometry([
          this.current_tasks_end_point
        ]);
      }
    },
    // 添加实时路径
    addRunPath(data) {
      if (
        this.current_tasks_runPath_vector_layer.getGeometryById(
          "current_tasks_run_path"
        )
      ) {
        // this.current_tasks_runPath_vector_layer.removeGeometry(
        //   this.current_tasks_run_path
        // );
        this.current_tasks_run_path.setCoordinates(data);
      } else {
        this.current_tasks_run_path = new maptalks.LineString(data, {
          id: "current_tasks_run_path",
          symbol: {
            // linePatternFile: "../../static/resources/images/lineRight.png",
            // lineWidth: {
            //   stops: [[1, 2], [5, 7], [9, 12], [12, 15]]
            // }
            lineColor: "#FF0000",
            lineWidth: 3,
            lineJoin: "round", //miter, round, bevel
            lineCap: "round", //butt, round, square
            lineDasharray: null, //dasharray, e.g. [10, 5, 5]
            lineOpacity: 1
          },
          smoothness: 0
        });
        this.current_tasks_runPath_vector_layer.addGeometry([
          this.current_tasks_run_path
        ]);
      }
    },
    // 添加当前点
    addCurrentPoint(message) {
      let nAngle = 0;
      nAngle = (message.anglez * 180) / Math.PI;
      if (this.current_point_vector_layer.getGeometryById("current_point")) {
        // this.current_point_vector_layer.removeGeometry(this.current_point);
        this.current_point.setCoordinates([message.x, message.z]);
        this.current_point.rotate(90 + nAngle);
      } else {
        this.current_point = new maptalks.Marker([message.x, message.z], {
          id: "current_point",
          symbol: {
            markerFile: "../../static/resources/images/currentRobotPoint2.png",
            markerWidth: {
              stops: [[1, 8], [5, 26], [9, 40], [12, 50]]
            },
            markerHeight: {
              stops: [[1, 8], [5, 26], [9, 40], [12, 50]]
              // stops: [[1, 12], [5, 38], [9, 60], [12, 75]]
            },
            markerDy: {
              stops: [[1, 4], [5, 13], [9, 20], [12, 25]]
              // stops: [[1, 6], [5, 19], [9, 30], [12, 37]]
            }
            // markerRotation: 90 + nAngle
          },
          properties: {
            foo: "value"
          }
        });
        this.current_point_vector_layer.addGeometry([this.current_point]);
        this.current_point.flash(
          500,
          -1,
          function() {
            //
          },
          function() {
            //
          }
        );
      }
    },
    //
    splitPath(data) {
      let diffe = data => {
        let cameraPoseIndex = -1;
        for (let i = 0, len = data.length; i < len; i++) {
          if (data[i].CameraPose) {
            cameraPoseIndex = i;
          }
        }
        return cameraPoseIndex;
      };
      //
      let nLen = diffe(data);
      let allPath = [];
      let allPathPoints = [];
      let checkPath = [];
      let checkPathPoints = [];
      let returnPath = [];
      let returnPathPoints = [];
      //
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].TLocType && data[i].TLoc) {
          var temp = data[i].TLoc.split(";");
          allPath.push(data[i]);
          allPathPoints.push({
            x: temp[0],
            y: temp[2]
          });
          if (i > nLen) {
            returnPath.push(data[i]);
            returnPathPoints.push({
              x: temp[0],
              y: temp[2]
            });
          } else {
            checkPath.push(data[i]);
            checkPathPoints.push({
              x: temp[0],
              y: temp[2]
            });
          }
        }
      }
      return {
        nLen: nLen,
        allPath: allPath,
        allPathPoints: allPathPoints,
        checkPath: checkPath,
        checkPathPoints: checkPathPoints,
        returnPath: returnPath,
        returnPathPoints: returnPathPoints
      };
    },
    // 给定点的列表,目标点,开始下标，返回目标点在给定点列表的下标 过滤条件开始下标 如果目标点不在列表中则返回 -1
    // 计算通过 点到 线的距离。 浮点 正负 0.5
    getLocationIndex(data, point, startIndex) {
      let endIndex = -1;
      for (let index = startIndex, len = data.length; index < len; index++) {
        if (index + 1 < len) {
          var TLoc1 = data[index];
          var TLoc2 = data[index + 1];

          let angle = this.getAngle(TLoc1, TLoc2);
          let quadrangle = [];
          let offsetValue = 0.5;
          if (angle % 180 > 45 && angle % 180 < 135) {
            quadrangle = [
              {
                x: parseFloat(TLoc1.x) - offsetValue,
                y: parseFloat(TLoc1.y)
              },
              {
                x: parseFloat(TLoc1.x) + offsetValue,
                y: parseFloat(TLoc1.y)
              },
              {
                x: parseFloat(TLoc2.x) + offsetValue,
                y: parseFloat(TLoc2.y)
              },
              {
                x: parseFloat(TLoc2.x) - offsetValue,
                y: parseFloat(TLoc2.y)
              }
            ];
          } else {
            quadrangle = [
              {
                x: parseFloat(TLoc1.x),
                y: parseFloat(TLoc1.y) - offsetValue
              },
              {
                x: parseFloat(TLoc1.x),
                y: parseFloat(TLoc1.y) + offsetValue
              },
              {
                x: parseFloat(TLoc2.x),
                y: parseFloat(TLoc2.y) + offsetValue
              },
              {
                x: parseFloat(TLoc2.x),
                y: parseFloat(TLoc2.y) - offsetValue
              }
            ];
          }
          let inside = this.PlinPolygon(point, quadrangle);
          // let inside2 = this.judgePointINQuadrangle(point, quadrangle);
          if (inside) {
            endIndex = index;
            break;
          }
        } else {
          // endIndex = index;
        }
      }
      return endIndex;
    },
    // 获取根据两点获取平面
    getAngle(point1, point2) {
      let point3 = { x: point1.x + 1, y: point1.y };

      let calculatePoint1 = { x: point2.x - point1.x, y: point2.y - point1.y };
      let calculatePoint2 = { x: point3.x - point1.x, y: point3.y - point1.y };

      let dot =
        calculatePoint1.x * calculatePoint2.x +
        calculatePoint1.y * calculatePoint2.y;
      let det =
        calculatePoint1.x * calculatePoint2.y +
        calculatePoint1.y * calculatePoint2.x;

      let angle = (Math.atan2(det, dot) / Math.PI) * 180;
      return (angle + 360) % 360;
    },
    //判断点是否在任意四边形内 顺时针叉乘同号(点在所有边一侧)
    judgePointINQuadrangle(targetPoint, points) {
      if (points.length < 4) return false;
      let point1 = points[0];
      let point2 = points[1];
      let point3 = points[2];
      let point4 = points[3];
      let a =
        (point2.x - point1.x) * (targetPoint.y - point1.y) -
        (point2.y - point1.y) * (targetPoint.x - point1.x);
      let b =
        (point3.x - point2.x) * (targetPoint.y - point2.y) -
        (point3.y - point2.y) * (targetPoint.x - point2.x);
      let c =
        (point4.x - point3.x) * (targetPoint.y - point3.y) -
        (point4.y - point3.y) * (targetPoint.x - point3.x);
      let d =
        (point1.x - point4.x) * (targetPoint.y - point4.y) -
        (point1.y - point4.y) * (targetPoint.x - point4.x);
      if (
        (a >= 0 && b >= 0 && c >= 0 && d >= 0) ||
        (a <= 0 && b <= 0 && c <= 0 && d <= 0)
      ) {
        return true;
      } else {
        return false;
      }
    },
    //判断点是否在多边形区域内
    PlinPolygon(targetPoint, points) {
      var nCross = 0;
      let pointLen = points.length;
      for (var i = 0; i < pointLen; i++) {
        let p1 = points[i];
        let p2 = points[(i + 1) % pointLen];
        if (p1.y == p2.y) {
          if (
            targetPoint.y == p1.y &&
            targetPoint.x >= (p1.x > p2.x ? p2.x : p1.x) &&
            targetPoint.x <= (p1.x > p2.x ? p1.x : p2.x)
          ) {
            return true;
          }
          continue;
        }
        if (
          targetPoint.y < (p1.y > p2.y ? p2.y : p1.y) ||
          targetPoint.y > (p1.y > p2.y ? p1.y : p2.y)
        ) {
          continue;
        }
        let x = ((targetPoint.y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;
        if (x > targetPoint.x) {
          nCross++;
        } else if (x == targetPoint.x) {
          return true;
        }
      }
      if (nCross % 2 == 1) {
        return true;
      }
      return false;
    },
    //
    getPointIndex(data, id) {
      let index = 0;
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].CameraPose) {
          var temp = data[i].CameraPose.split(";");
          for (let j = 0, nlen = temp.length; j < nlen; j++) {
            if (temp[j].substring(0, temp[j].indexOf(":")) == id) {
              index = i;
            }
          }
        }
      }
      return index;
    },
    //
    addTaskInfo(data) {
      let tempData = this.splitPath(data);
      //
      let nLen = tempData.nlen;
      let allPath = tempData.allPath;
      let allPathPoints = tempData.allPathPoints;
      let checkPath = tempData.checkPath;
      let checkPathPoints = tempData.checkPathPoints;
      let returnPath = tempData.returnPath;
      let returnPathPoints = tempData.returnPathPoints;
      //
      // if (this.robotInfo.robotOneClickReturnStatus == 1) {
      //   //
      // }
      this.addCheckPath(checkPathPoints);
      //
      this.addReturnPath(returnPathPoints);
      //
      this.addStartPoint({ x: checkPathPoints[0].x, y: checkPathPoints[0].y });
      //
      this.addEndPoint({
        x: checkPathPoints[checkPathPoints.length - 1].x,
        y: checkPathPoints[checkPathPoints.length - 1].y
      });
    },
    //
    realtimePath(data, point) {
      let tempData = this.splitPath(data);
      let nLen = tempData.nlen;
      let allPath = tempData.allPath;
      let allPathPoints = tempData.allPathPoints;
      let checkPath = tempData.checkPath;
      let checkPathPoints = tempData.checkPathPoints;
      let returnPath = tempData.returnPath;
      let returnPathPoints = tempData.returnPathPoints;
      //
      if (this.robotInfo.robotOneClickReturnStatus == 1) {
        let index = 0;
        if (this.robotInfo.runPathPoints.length > 0) {
          index = this.robotInfo.runPathPoints.length - 1;
        }
        let indexLen = this.getLocationIndex(
          returnPathPoints,
          { x: point.x, y: point.z },
          index
        );
        if (indexLen === -1) {
          indexLen = index;
        }
        if (this.robotInfo.runPathPoints.length <= indexLen) {
          for (
            let i = this.robotInfo.runPathPoints.length,
              len = returnPathPoints.length;
            i <= indexLen;
            i++
          ) {
            this.robotInfo.runPathPoints.push(returnPathPoints[i]);
          }
        }
        let lineArr = JSON.parse(JSON.stringify(this.robotInfo.runPathPoints));
        lineArr.push({ x: point.x, y: point.z });
        this.addRunPath(lineArr);
      } else {
        let index = 0;
        if (this.taskInfo.currentPoint && this.taskInfo.currentPoint.id) {
          index = this.getPointIndex(checkPath, this.taskInfo.currentPoint.id);
        }
        if (this.robotInfo.runPathPoints.length > 0) {
          if (this.robotInfo.runPathPoints.length > index) {
            index = this.robotInfo.runPathPoints.length - 1;
          }
        }
        let indexLen = this.getLocationIndex(
          checkPathPoints,
          { x: point.x, y: point.z },
          index
        );
        let targetIndex = indexLen === -1 ? index : indexLen;
        if (this.robotInfo.runPathPoints.length <= targetIndex) {
          for (
            let i = this.robotInfo.runPathPoints.length,
              len = checkPathPoints.length;
            i <= targetIndex;
            i++
          ) {
            this.robotInfo.runPathPoints.push(checkPathPoints[i]);
          }
        }
        let lineArr = JSON.parse(JSON.stringify(this.robotInfo.runPathPoints));
        if (this.getTasksPassPointNum() < this.getTasksPointTotal()) {
          if (this.getTasksPassPointNum() > 0 && indexLen === -1) {
            // 呵呵呵
          } else {
            lineArr.push({ x: point.x, y: point.z });
          }
        } else {
          //
        }
        if (this.taskInfo.taskStatus == 2) {
          lineArr = [];
        }
        this.addRunPath(lineArr);
      }
    },
    //
    monitorsPoint() {
      var b = false;
      setInterval(() => {
        if (this.robotInfo.poseStatus == 1) {
          this.robotInfo.poseStatus = 0;
          if (!b) {
            b = true;
            this.current_point.flash(
              500,
              -1,
              function() {
                //
              },
              function() {
                //
              }
            );
          }
        } else {
          if (b) {
            b = false;
            this.current_point.flash(
              500,
              0,
              function() {
                //
              },
              function() {
                //
              }
            );
          }
        }
      }, 3000);
    },
    //
    clearMapData() {
      this.robotInfo.runPathPoints = [];
    },
    //
    clearParam() {
      this.rosObj.ip = "";
      this.rosObj.port = "";
      this.videoObj.ip = "";
      this.videoObj.port = "";
      this.videoObj.name = "";
      this.videoObj.password = "";
    },
    getAlarmTypes() {
      this.alarmTypes = [];
      alarmTypesList()
        .then(response => {
          if (response) {
            this.alarmTypes = response.list;
          }
        })
        .catch(() => {});
    },
    getWatchPossList() {
      watchPossList({ page: 1, size: 0 })
        .then(response => {
          if (response.list) {
            this.watchPossList = response.list;
            this.stops_point_vector_layer.addGeometry(
              this.getStopsPoint(this.watchPossList)
            );
          }
        })
        .catch(() => {});
    },
    getPointsList() {
      pointsList({ page: 1, size: 0 })
        .then(response => {
          if (response.list) {
            this.pointsList = response.list;
            this.checks_point_vector_layer.addGeometry(
              this.getChecksPoint(this.pointsList)
            );
            F;
          }
        })
        .catch(() => {});
    },
    getRobotsList() {
      robotsList()
        .then(response => {
          if (response.list && response.list.length > 0) {
            this.robotList = response.list;
            this.robot_id = response.list[0].id;
            localStorage.setItem("ydRobot_id", response.list[0].id);
            localStorage.setItem(
              "ydRobot_device_id",
              response.list[0].deviceId
            );
            this.getRobotParams({
              page: 1,
              size: 0,
              robotId: response.list[0].id,
              type: 3
            });
            this.getRobotsCurrentTask();
          }
        })
        .catch(() => {});
    },
    getRobotParams(data) {
      robotParams(data)
        .then(response => {
          if (response.list && response.list.length > 0) {
            for (var i = 0, len = response.list.length; i < len; i++) {
              if (response.list[i].name === "visible_light_ip") {
                this.videoObj.ip = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_port") {
                this.videoObj.port = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_account") {
                this.videoObj.name = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_password") {
                this.videoObj.password = response.list[i].value;
              }
              if (response.list[i].name === "ros_websocket_ip") {
                this.rosObj.ip = response.list[i].value;
              }
              if (response.list[i].name === "ros_websocket_port") {
                this.rosObj.port = response.list[i].value;
              }

              if (response.list[i].name === "visible_light_h5_protocol") {
                this.videoConf.protocol = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_ip") {
                this.videoConf.host = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_token") {
                this.videoConf.token = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_session") {
                this.videoConf.session = response.list[i].value;
              }
              if (response.list[i].name === "kurento_wsuri") {
                this.kurento.wsUri = response.list[i].value;
              }
              if (response.list[i].name === "kurento_rtsp") {
                this.kurento.rtspAddress = response.list[i].value;
              }

              if (response.list[i].name === "rtsp_address") {
                this.rtspAddress = response.list[i].value;
              }
              if (response.list[i].name === "webrtc_address") {
                this.webrtcAddress = response.list[i].value;
              }
            }
          }
          // this.initRos();
          this.loadJs("./static/lib/hikvision/codebase/webVideoCtrl.js", () => {
            this.initVisibleLight();
          });
        })
        .catch(() => {});
    },
    //
    getTasksName() {
      if (this.taskInfo.type == 1) {
        return this.taskInfo.taskName;
      }
      return "";
    },
    getTasksStatus() {
      if (this.taskInfo.type == 1) {
        // 任务状态 0:已执行 1:终止 2:暂停 3:正在执行 4:未执行 5:超期 6:预执行 7:超时
        if (this.taskInfo.taskStatus == 0) {
          return "已完成";
        }
        if (this.taskInfo.taskStatus == 1) {
          return "已终止";
        }
        if (this.taskInfo.taskStatus == 2) {
          return "已暂停";
        }
        if (this.taskInfo.taskStatus == 3) {
          return "正在运行";
        }
        if (this.taskInfo.taskStatus == 4) {
          return "未执行";
        }
        if (this.taskInfo.taskStatus == 5) {
          return "超期";
        }
        if (this.taskInfo.taskStatus == 6) {
          return "预执行";
        }
        if (this.taskInfo.taskStatus == 7) {
          return "超时";
        }
      }
      return "";
    },
    getTasksPointTotal() {
      if (this.taskInfo.type == 1) {
        return this.taskInfo.pointTotal <= 0 ? 0 : this.taskInfo.pointTotal;
      }
      return "";
    },
    getTasksAbnormalPointNum() {
      if (this.taskInfo.type == 1) {
        return this.taskInfo.abnormalPointNum <= 0
          ? 0
          : this.taskInfo.abnormalPointNum;
      }
      return "";
    },
    getTasksCurrentPointPoint() {
      if (this.taskInfo.type == 1) {
        if (this.taskInfo.currentPoint && this.taskInfo.currentPoint.name) {
          return this.taskInfo.currentPoint.name;
        }
      }
      return "";
    },
    getTasksEstimateTime() {
      if (this.taskInfo.type == 1) {
        let estimateTime =
          this.taskInfo.totalRunTime - this.taskInfo.cumulativeRunTime;
        if (estimateTime <= 0) {
          return "0分钟";
        } else {
          if (estimateTime <= 60) {
            return estimateTime.toFixed(0) + "秒";
          } else {
            return (estimateTime / 60).toFixed(0) + "分钟";
          }
        }
      }
      return "";
    },
    getTasksProgress() {
      if (this.taskInfo.type == 1) {
        if (
          (this.taskInfo.cumulativeRunTime / this.taskInfo.totalRunTime) *
            100 >=
          100
        ) {
          return 100 + "%";
        }
        if (
          (this.taskInfo.cumulativeRunTime / this.taskInfo.totalRunTime) *
            100 <=
          0
        ) {
          return 0 + "%";
        }
        return (
          (
            (this.taskInfo.cumulativeRunTime / this.taskInfo.totalRunTime) *
            100
          ).toFixed(2) + "%"
        );
      }
      return "";
    },
    getTasksPassPointNum() {
      if (this.taskInfo.type == 1) {
        return this.taskInfo.passPointNum <= 0 ? 0 : this.taskInfo.passPointNum;
      }
      return "";
    },
    //
    getRobotsCurrentTask() {
      robotsCurrentTask({}, this.robot_id)
        .then(res => {
          this.clearMapData();
          if (res) {
            console.log("robotsCurrentTask", res);
            this.taskInfo = res;
            if (this.taskInfo) {
              if (this.taskInfo.type == 0) {
                this.robotInfo.robotOneClickReturnStatus = 0;
                this.$message({
                  message: "当前没有任务正在执行!",
                  duration: 5000
                });
              }
              if (this.taskInfo.inspectTypeId == 3000) {
                this.robotInfo.robotOneClickReturnStatus = 1;
                this.taskInfo.taskName = "返航";
                if (res.pathPlanning) {
                  //
                } else {
                  let timeoutTimer = window.setTimeout(() => {
                    this.getRobotsCurrentTask();
                  }, 3000);
                }
              } else if (
                this.taskInfo.type == 1 &&
                this.taskInfo.inspectTypeId == 3000
              ) {
                this.robotInfo.robotOneClickReturnStatus = 0;
                if (
                  res.pathPlanning &&
                  res.totalRunTime &&
                  res.totalRunTime > 0
                ) {
                  if (res.pathPlanning) {
                    var temp = JSON.parse(res.pathPlanning.path);
                    if (temp.InspectId == res.taskHistoryId) {
                      //
                    } else {
                      let timeoutTimer = window.setTimeout(() => {
                        this.getRobotsCurrentTask();
                      }, 3000);
                    }
                  }
                } else {
                  let timeoutTimer = window.setTimeout(() => {
                    this.getRobotsCurrentTask();
                  }, 3000);
                }
              }
              if (this.taskInfo.type == 2) {
                this.robotInfo.robotOneClickReturnStatus = 1;
                this.taskInfo.taskName = "返航";
                if (res.pathPlanning) {
                  //
                } else {
                  let timeoutTimer = window.setTimeout(() => {
                    this.getRobotsCurrentTask();
                  }, 3000);
                }
              }
            }
            //
            if (res.pathPlanning) {
              var temp = JSON.parse(res.pathPlanning.path);
              this.addTaskInfo(temp.Tasks);
            }
            if (res.pathPlanningHistorys) {
              for (
                var i = 0, len = res.pathPlanningHistorys.length;
                i < len;
                i++
              ) {
                var temp = JSON.parse(res.pathPlanningHistorys[i].record);
                this.addHistoryPath(temp.Tasks);
              }
            }
            //
            if (this.taskInfo.taskStatus === 3) {
              this.checkLayerList = [3, 4, 5, 6, 7, 8, 9];
              this.handleLayerCheckChange(this.checkLayerList);
              this.current_tasks_stopsPoint_vector_layer.clear();
              this.current_tasks_checks_Point_vector_layer.clear();
              this.getCurrentTaskWatchPos();
              this.getCurrentTaskCheckPoints();
              if (this.taskInfo.restartStartTime) {
                var taskStartTime = this.taskInfo.taskStartTime;
                this.taskInfo.cumulativeRunTime =
                  this.taskInfo.cumulativeRunTime +
                  (this.taskInfo.currentSysTime -
                    new Date(taskStartTime.replace(/-/g, "/")).getTime()) /
                    1000;
              } else {
                var taskStartTime = this.taskInfo.taskStartTime;
                this.taskInfo.cumulativeRunTime =
                  this.taskInfo.cumulativeRunTime +
                  (this.taskInfo.currentSysTime -
                    new Date(taskStartTime.replace(/-/g, "/")).getTime()) /
                    1000;
              }
            }
            clearInterval(this.intervalTime);
            this.intervalTime = setInterval(() => {
              if (this.taskInfo.taskStatus === 3) {
                this.taskInfo.cumulativeRunTime++;
              } else {
                //
              }
            }, 1000);
            //
            this.getPointHistoryList({
              page: 1,
              size: 0,
              taskHistoryId: this.taskInfo.taskHistoryId
            });
            this.getPointAlarmRecordList({
              page: 1,
              size: 0,
              taskHistoryId: this.taskInfo.taskHistoryId
            });
            this.getCurrentTaskAlarmNum({
              robotId: this.robot_id
            });
            this.getSysPointAlarmHistorysList({
              page: 1,
              size: 0,
              robotId: this.robot_id
            });
          }
        })
        .catch(() => {});
    },
    getPointHistoryList(param) {
      this.tableData = [];
      pointHistoryList(param)
        .then(response => {
          if (response.list) {
            this.tableData = response.list.map(item => {
              return {
                point_id: item.pointId,
                task_name: item.task.name,
                name: item.point.name,
                recon_time: item.reconTime,
                value: item.value,
                recon_type_name: item.reconType.name,
                save_type_id: item.point.saveTypeId,
                pic_address:
                  item.point &&
                  (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
                    ? item.flirPic
                    : item.point.saveTypeId === 2
                    ? item.cameraPic
                    : ""
              };
            });
          }
        })
        .catch(() => {});
    },
    getPointAlarmRecordList(param) {
      this.deviceAlarmTableData = [];
      pointAlarmRecordList(param)
        .then(response => {
          if (response.list) {
            this.deviceAlarmTableData = response.list.map(item => {
              return {
                point_id: item.pointId,
                task_name: item.task.name,
                name: item.point.name,
                recon_time: item.reconTime,
                value: item.pointHistory.value,
                recon_type_name: item.reconType.name,
                alarm_type_name: item.alarmType.name,
                alarm_level: item.alarmLevel,
                save_type_id: item.point.saveTypeId,
                pic_address:
                  item.point &&
                  (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
                    ? item.pointHistory.flirPic
                    : item.point.saveTypeId === 2
                    ? item.pointHistory.cameraPic
                    : ""
              };
            });
            // this.taskInfo.abnormalPointNum = this.deviceAlarmTableData.length;
          }
        })
        .catch(() => {});
    },
    getCurrentTaskAlarmNum(param) {
      this.publishAlarm.alarmNumber = 0;
      currentTaskAlarmNum(param)
        .then(response => {
          if (response) {
            this.publishAlarm.alarmNumber = response.currentTaskAlarmNum;
          }
        })
        .catch(() => {});
    },
    getSysPointAlarmHistorysList(param) {
      this.systemAlarmTableData = [];
      sysPointAlarmHistorysList(param)
        .then(response => {
          // console.log(response)
          if (response.list) {
            this.systemAlarmTableData = response.list.map(item => {
              return {
                alarmLevel: item.alarmLevel,
                alarmTypeId: item.alarmTypeId,
                alarmTime: item.createTime,
                alarmDesc:
                  item.sysPoint.displayName +
                  " " +
                  item.sysPoint.description +
                  "! 错误代码:" +
                  item.sysPoint.name
              };
            });
          }
        })
        .catch(() => {});
    },
    // 获取当前任务监测点
    getCurrentTaskCheckPoints() {
      currentTaskCheckPoints({}, this.taskInfo.taskId)
        .then(response => {
          if (response) {
            this.current_tasks_checks_Point_vector_layer.addGeometry(
              this.getChecksPoint(response)
            );
          }
        })
        .catch(() => {});
    },
    // 获取当前任务停靠点
    getCurrentTaskWatchPos() {
      currentTaskWatchPos({}, this.taskInfo.taskId)
        .then(response => {
          if (response) {
            this.current_tasks_stopsPoint_vector_layer.addGeometry(
              this.getStopsPoint(response)
            );
          }
        })
        .catch(() => {});
    },
    setTaskState(data) {
      // Finally, we call the /add_two_ints service and get back the results in the callback. The result
      // is a ROSLIB.ServiceResponse object.
      this.taskClearCallSeavice(data, result => {
        var status = 0;
        if (data.flag === 0) {
          this.taskInfo.taskStatus = 0;
          status = 2;
          this.$message({ message: "任务已终止" });
        }
        if (data.flag === 1) {
          this.taskInfo.taskStatus = 2;
          status = 1;
          this.$message({ message: "任务已暂停" });
        }
        if (data.flag === 2) {
          this.taskInfo.taskStatus = 3;
          status = 3;
          this.$message({ message: "任务已继续" });
        }
        this.taskControlStatusPub({
          task_history_id: this.taskInfo.taskHistoryId,
          task_status: status
        });
      });
    },
    handleSuspend() {
      this.setTaskState({ flag: 1 });
      this.stopReceiveLaserPub({
        data: true
      });
    },
    handleTermination() {
      this.setTaskState({ flag: 0 });
      this.stopReceiveLaserPub({
        data: true
      });
    },
    handleContinue() {
      this.setTaskState({ flag: 2 });
      this.stopReceiveLaserPub({
        data: false
      });
    },
    handleOnebuttonback() {
      this.stopReceiveLaserPub({
        data: false
      });
      var status = this.oneButtonBackPub({
        robot_id: parseInt(this.robot_id)
      });
      if (status != 0) {
        this.$message({
          message: "通讯连接失败，请刷新后重试!",
          type: "warning"
        });
        return;
      }

      this.onebuttonbackLoading = this.$loading({
        lock: true,
        text: "任务规划中，请稍后...",
        spinner: "el-icon-loading",
        customClass: "urgency-task-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.onebuttonbackTime = setTimeout(() => {
        this.onebuttonbackLoading.close();
        this.$confirm("一键返航超时!", "提示", {
          showCancelButton: false,
          confirmButtonText: "确定",
          type: "warning"
        });
      }, 30000);
    },
    handleSelPoint() {},
    handleCreateTask() {
      if (this.robotInfo.robotControlModel === 3) {
        this.$router.push({ path: "/tasks/urgent-task" });
      }
    },
    handleStop() {},
    handleFullscreen() {},
    handleLayer() {},
    handleLayerCheckChange(val) {
      if (val.some(item => item === 1)) {
        this.stops_point_vector_layer.show();
      } else {
        this.stops_point_vector_layer.hide();
      }
      if (val.some(item => item === 2)) {
        this.checks_point_vector_layer.show();
      } else {
        this.checks_point_vector_layer.hide();
      }
      if (val.some(item => item === 3)) {
        this.current_tasks_stopsPoint_vector_layer.show();
      } else {
        this.current_tasks_stopsPoint_vector_layer.hide();
      }
      if (val.some(item => item === 4)) {
        this.current_tasks_checks_Point_vector_layer.show();
      } else {
        this.current_tasks_checks_Point_vector_layer.hide();
      }
      if (val.some(item => item === 5)) {
        this.current_tasks_historyPath_vector_layer.show();
      } else {
        this.current_tasks_historyPath_vector_layer.hide();
      }
      if (val.some(item => item === 6)) {
        this.current_tasks_path_vector_layer.show();
      } else {
        this.current_tasks_path_vector_layer.hide();
      }
      if (val.some(item => item === 7)) {
        this.current_tasks_runPath_vector_layer.show();
      } else {
        this.current_tasks_runPath_vector_layer.hide();
      }
      if (val.some(item => item === 8)) {
        this.current_tasks_startEnd_vector_layer.show();
      } else {
        this.current_tasks_startEnd_vector_layer.hide();
      }
      if (val.some(item => item === 9)) {
        this.current_point_vector_layer.show();
      } else {
        this.current_point_vector_layer.hide();
      }
    },
    setRobotModel(data) {
      this.controlModelPub({
        data: data
      });
      this.stopReceiveLaserPub({
        data: false
      });

      var txt = "";
      if (data == 0) txt = "操作-机器人-任务模式";
      else if (data == 3) txt = "操作-机器人-紧急定位模式";
      else if (data == 2) txt = "操作-机器人-后台遥控模式";
      else if (data == 1) txt = "操作-机器人-手动遥控模式";

      this.setOperationLogs(txt);
    },
    // 任务模式
    taskModel() {
      this.setRobotModel(0);
    },
    // 紧急定位模式
    urgentLocationModel() {
      this.setRobotModel(3);
    },
    // 后台遥控模式
    backControlModel() {
      this.setRobotModel(2);
    },
    manualControlModel() {
      this.setRobotModel(1);
    },
    // 车体控制循环发送
    carUninterruptedControl(param) {
      window.clearInterval(this.carTime);
      this.carTime = setInterval(() => {
        console.log("循环控制指令", param);
        this.carControlPub(param);
      }, 500);
    },
    // 车体控制事件
    carControl(parameters) {
      console.log("控制指令", parameters);
      this.carControlPub(parameters);
    },

    getCarControlValue(val) {
      switch (val) {
        case "forward":
          return this.selectedSpeed
            ? matchArrayContent(this.selectedSpeed, this.lineSpeeds)
            : 0.1;
          break;
        case "backward":
          return this.selectedSpeed
            ? matchArrayContent(this.selectedSpeed, this.lineSpeeds) * -1
            : -0.1;
          break;
        case "left":
          return -1;
          break;
        case "right":
          return 1;
          break;
        default:
          return 0;
          break;
      }
    },
    getCarControlParam(val) {
      let value = this.getCarControlValue(val);
      var param = {
        direct_angle: 0,
        speed: {
          linear: {
            x: 0
          },
          angular: {
            z: 0
          }
        }
      };
      switch (val) {
        case "forward":
        case "backward":
          param.speed.linear.x = value;
          break;
        case "left":
        case "right":
          param.speed.angular.z = value;
          break;
      }
      return param;
    },

    carButtonDown(val) {
      let param = this.getCarControlParam(val);
      if (this.loopStatus && (val === "forward" || val === "backward")) {
        window.clearInterval(this.circleTime);
        this.carRunDirection = val;
        this.circleTime = window.setInterval(() => {
          this.carControl(param);
        }, 800);
      } else {
        window.clearInterval(this.carCustomBtnTimer);
        this.carCustomBtnTimer = setTimeout(() => {
          this.carCustomBtnLongStatus = true;
          this.carUninterruptedControl(param);
        }, 1000);
      }
    },

    carButtonUp(val) {
      if (this.loopStatus && (val === "forward" || val === "backward")) {
        // 方便和上面一样写法 所以空块语句
      } else {
        window.clearInterval(this.carCustomBtnTimer);
        if (this.carCustomBtnLongStatus) {
          window.clearInterval(this.carTime);
          this.carCustomBtnLongStatus = false;
        } else {
          let param = this.getCarControlParam(val);
          this.carControlPub(param);
        }
      }
    },
    carCenter_Down() {
      this.carRunDirection = "";
      window.clearInterval(this.circleTime);
      this.carControl({
        direct_angle: 0,
        speed: {
          linear: {
            x: 0
          },
          angular: {
            z: 0
          }
        }
      });
    },
    car_Release() {
      window.clearInterval(this.carTime);
    },
    // 云台控制事件
    holderUninterruptedControl(param) {
      window.clearInterval(this.holderTime);
      this.holderTime = setInterval(() => {
        this.holderControlPub(param);
      }, 1000);
    },
    // 云台控制事件
    holderClickControl(parameters) {
      this.holderControlPub(parameters);
    },
    holderControlService(param) {
      param["id"] = 1;
      param["action"] = 1;
      this.holderControlCallServices(param, result => {
        // 输入操作结果
      });
    },
    getCloudDirectionValue(val) {
      switch (val) {
        case "top":
          return "up";
          break;
        case "bottom":
          return "down";
          break;
        case "left":
          return "left";
          break;
        case "right":
          return "right";
          break;
        default:
          return "";
          break;
      }
    },
    getCloudTypeValue(val) {
      switch (val) {
        case "top":
        case "bottom":
          return 1;
          break;
        case "left":
        case "right":
          return 0;
          break;
        default:
          return 0;
          break;
      }
    },
    getCloudAngleValue(val) {
      switch (val) {
        case "top":
          return this.veticalAngle == 0 ? 0 : 36000 - this.veticalAngle * 100;
          break;
        case "bottom":
          return this.veticalAngle * 100;
          break;
        case "left":
          return this.horizontalAngle == 0
            ? 0
            : 36000 - this.horizontalAngle * 100;
          break;
        case "right":
          return this.horizontalAngle * 100;
          break;
        default:
          return 0;
          break;
      }
    },
    holderButtonDown(val) {
      if (this.isSingle) {
        var direction = this.getCloudDirectionValue(val);
        window.clearInterval(this.cloudsCustomBtnTimer);
        this.cloudsCustomBtnTimer = setTimeout(() => {
          this.cloudsCustomBtnLongStatus = true;
          this.holderUninterruptedControl({
            direction: direction,
            number: 1,
            step: 2
          });
        }, 1000);
      } else {
        var type = this.getCloudTypeValue(val);
        var value = this.getCloudAngleValue(val);
        this.holderControlService({
          type: type,
          value: value
        });
      }
    },
    holderButtonUp(val) {
      if (this.isSingle) {
        window.clearInterval(this.cloudsCustomBtnTimer);
        if (this.cloudsCustomBtnLongStatus) {
          window.clearInterval(this.holderTime);
          this.cloudsCustomBtnLongStatus = false;
        } else {
          var direction = this.getCloudDirectionValue(val);
          this.holderClickControl({
            direction: direction,
            number: 1,
            step: 2
          });
        }
      }
    },
    holder_Release() {
      window.clearInterval(this.cloudsCustomBtnTimer);
      window.clearInterval(this.holderTime);
    },
    showImage(val) {
      var image = new Image();
      image.src = val;
      var viewer = new Viewer(image, {
        navbar: false,
        hidden: function() {
          viewer.destroy();
        }
      });
      viewer.show();
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    }
  }
};
</script>

<style>
.RobotControl {
  width: 100%;
  height: 100%;
  min-height: 660px;
}

.RobotControl .yd-row {
  width: 100%;
  height: 100%;
}

.RobotControl .yd-col {
  /* width: 100%; */
  height: 100%;
}

.RobotControl .left-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

.RobotControl .robot-map {
  width: 100%;
  height: calc(100% - 130px);
  /* border: 1px solid rgb(198, 205, 211); */
}

.RobotControl .map-data {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  /* background-image: url(../../../static/resources/images/map.jpg);
  background-size: 100% 100%; */
}

.RobotControl .map-info {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 93, 139);
  /* background-image: url(../../../static/resources/images/map.jpg);
  background-size: 100% 100%; */
}

.RobotControl .list-info {
  width: 100%;
  height: 34%;
  min-height: 300px;
  flex-grow: 1;
}

.RobotControl .el-tabs-redefine {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

.RobotControl .list-info .el-tabs__header {
  box-sizing: border-box;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.RobotControl .list-info .el-tabs--border-card > .el-tabs__content {
  flex-grow: 1;
  padding: 10px 10px 10px 10px;
}

.RobotControl
  .list-info
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item {
  height: 30px;
  margin: 0px 3px 0px 3px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #000;
}

.RobotControl
  .list-info
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  color: rgb(16, 156, 180);
  border: 1px solid rgb(16, 156, 180);
  border-bottom: none;
}

.RobotControl .list-info .el-tab-pane {
  width: 100%;
  height: 100%;
}

.RobotControl .robot-info-list {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-flow: column; */
}

.RobotControl .right-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

.RobotControl .basic-information {
  width: 100%;
  height: 100px;
  padding: 3px 10px;
  background-color: rgb(227, 242, 238);
}

.RobotControl .task-control {
  width: 100%;
  height: 30px;
  background-color: #109cb4;
  border: 1px solid rgb(198, 205, 211);
}

.RobotControl .task-control .yd-button {
  color: #ffffff;
  margin: 0 10px;
}

.RobotControl .task-control .yd-button:hover {
  color: #cccccc;
}

.RobotControl .task-control .yd-button-disabled {
  color: #cccccc;
}

.RobotControl .task-control .yd-dropdown {
  color: #ffffff;
  margin: 0 10px;
}

.RobotControl .task-control .yd-dropdown:hover {
  color: #cccccc;
}

.RobotControl .task-control .yd-dropdown-disabled {
  color: #cccccc;
}

.RobotControl .task-control .yd-dropdown-title {
  font-size: 12px;
}

.RobotControl .general-area {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.RobotControl .general-title {
  width: 100%;
  height: 26px;
  /* border-bottom: 1px solid rgb(56, 137, 161); */
  display: block;
  text-align: center;
  font-size: 16px;
  color: rgb(79, 198, 228);
}

.RobotControl .general-item {
  width: 100%;
  height: auto;
}

.RobotControl .item {
  width: 100%;
  height: auto;
}

.RobotControl .item-title {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
}

.RobotControl .item-value {
  height: auto;
  line-height: 30px;
  font-size: 13px;
  text-align: left;
}

.RobotControl .chart-pie-area {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.RobotControl .chart-pie-title {
  width: 100%;
  height: 26px;
  /* border-bottom: 1px solid rgb(56, 137, 161); */
  display: block;
  text-align: center;
  font-size: 16px;
  color: rgb(79, 198, 228);
}

.RobotControl .chart-pie {
  /* width: 100%; */
  /* height: 100%; */
  width: calc(100% - 2px);
  height: calc(100% - 26px);
  margin: auto auto;
  padding: 3px;
}

.RobotControl .display-information {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border-left: 1px solid rgb(198, 205, 211);
}

.RobotControl .display-video {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid rgb(159, 186, 202);
}

.RobotControl .video-info {
  width: 100%;
  height: 100%;
  background-color: #333;
  /* background-image: url(../../../static/resources/images/video.png);
  background-size: 100% 100%; */
}

.RobotControl .plugin {
  width: 100%;
  height: 100%;
}

.RobotControl .h5video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.RobotControl .display-infrared {
  width: 100%;
  height: 50%;
  border-top: 1px solid rgb(202, 171, 171);
}

.RobotControl .infrared-info {
  width: 100%;
  height: 100%;
  background-color: #333;
  /* background-image: url(../../../static/resources/images/infrared.png); */
  /* background-size: 100% 100%; */
}

.RobotControl .infrared-img {
  width: 100%;
  height: 100%;
}

.RobotControl .control-information {
  width: 100%;
  /* height: 300px; */
  height: 34%;
  min-height: 300px;
  border: 1px solid rgb(198, 205, 211);
  flex-grow: 1;
}

.RobotControl .control-head {
  width: 100%;
  height: 80px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.RobotControl .control-head .head-but {
  width: 60px;
  height: 26px;
  padding: 0 0;
  background-color: rgb(30, 30, 30);
  font-size: 12px;
  color: #fff;
}
.RobotControl .control-head .head-but:hover {
  background-color: rgb(64, 93, 102);
}
.RobotControl .control-head .head-but-disabled {
  background-color: #7c9eac;
}
.RobotControl .control-head .head-but-disabled:hover {
  background-color: #7c9eac;
}

.RobotControl .control-head .head-but-img {
  width: 20px;
  height: 20px;
}

.RobotControl .control-head .head-text-but {
  width: 100px;
  height: 27px;
  padding: 0 0;
  background-color: rgb(16, 156, 180);
  font-size: 12px;
  color: #fff;
}
.RobotControl .control-head .head-text-but-disabled {
  background-color: #7c9eac;
  color: #dfdfdf;
}

.RobotControl .control-head .but-light {
  background-color: rgb(180, 130, 60);
}

.RobotControl .control-area {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 80px);
  background-color: #fff;
}

.RobotControl .radar-area {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 1px solid rgb(186, 233, 216);
}

.RobotControl .radar-title {
  width: 100%;
  height: 26px;
  display: block;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.RobotControl .radar {
  background: -webkit-radial-gradient(
      center,
      rgba(32, 255, 77, 0.3) 0%,
      rgba(32, 255, 77, 0) 75%
    ),
    -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(
            32,
            255,
            77,
            0
          )
          18%, rgb(16, 156, 180) 18.6%, rgba(32, 255, 77, 0) 18.9%),
    -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, rgb(16, 156, 180)
          50%, rgb(16, 156, 180) 50%, rgba(32, 255, 77, 0) 50.2%),
    -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, rgb(16, 156, 180)
          50%, rgb(16, 156, 180) 50%, rgba(32, 255, 77, 0) 50.2%);
  /* background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); */
  width: 120px;
  height: 120px;
  position: relative;
  margin: auto auto;
  top: calc(50% - 60px - 0px);
  /* transform: translate(-50%, -50%); */
  border-radius: 50%;
  border: 0.2rem solid rgb(16, 156, 180);
  overflow: hidden;
}
.RobotControl .radar:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: blips 5s infinite;
  animation-timing-function: linear;
  animation-delay: 1.4s;
}
.RobotControl .radar:after {
  content: " ";
  display: block;
  background-image: linear-gradient(
    44deg,
    rgba(0, 255, 51, 0) 50%,
    rgb(16, 156, 180) 100%
  );
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: radar-beam 5s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}
@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blips {
  14% {
    background: radial-gradient(
      1vmin circle at 75% 70%,
      #ffffff 10%,
      rgb(16, 156, 180) 30%,
      rgba(255, 255, 255, 0) 70%
    );
  }
  14.0002% {
    background: radial-gradient(
        1vmin circle at 75% 70%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 63% 72%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      );
  }
  25% {
    background: radial-gradient(
        1vmin circle at 75% 70%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 63% 72%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 56% 86%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      );
  }
  26% {
    background: radial-gradient(
        1vmin circle at 75% 70%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 63% 72%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 56% 86%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      );
    opacity: 1;
  }
  100% {
    background: radial-gradient(
        1vmin circle at 75% 70%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 63% 72%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        1vmin circle at 56% 86%,
        #ffffff 10%,
        rgb(16, 156, 180) 30%,
        rgba(255, 255, 255, 0) 70%
      );
    opacity: 0;
  }
}
.RobotControl .car-area {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 1px solid rgb(186, 233, 216);
  overflow: hidden;
}

.RobotControl .div-title {
  width: 100%;
  height: 26px;
  line-height: 26px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  text-align: center;
  font-size: 13px;
}

.RobotControl .car-title {
  width: 100%;
  height: 26px;
  display: block;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.RobotControl .car-direction {
  position: relative;
  width: 120px;
  height: 120px;
  margin: auto auto;
  top: calc(50% - 60px - 0px);
  border: 1px solid rgb(190, 230, 230);
  border-radius: 50%;
  background-color: rgb(190, 230, 230);
}
.RobotControl .car-direction .car-direction-but {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  clip: rect(0px, 58px, 58px, 0px);
}
.RobotControl .car-direction .car-but-text {
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  text-align: center;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RobotControl .car-direction .car-but-text-disabled {
  color: #dfdfdf;
}
.RobotControl .car-direction .car-direction-but,
.RobotControl .car-direction .car-center-but {
  transition: 0.5s;
  background-color: rgb(16, 156, 180);
  cursor: pointer;
}
.RobotControl .car-direction .car-direction-but-disabled {
  background-color: #7c9eac;
  cursor: not-allowed;
}
.RobotControl .car-direction .car-direction-but-check {
  background-color: rgb(180, 130, 60);
}
.RobotControl .car-direction .car-top-but {
  transform: rotate(45deg);
}
.RobotControl .car-direction .car-top-but-text {
  transform: rotate(-45deg);
}
.RobotControl .car-direction .car-right-but {
  transform: rotate(135deg);
}
.RobotControl .car-direction .car-right-but-text {
  transform: rotate(-135deg);
}
.RobotControl .car-direction .car-bottom-but {
  transform: rotate(-135deg);
}
.RobotControl .car-direction .car-bottom-but-text {
  transform: rotate(135deg);
}
.RobotControl .car-direction .car-left-but {
  transform: rotate(-45deg);
}
.RobotControl .car-direction .car-left-but-text {
  transform: rotate(45deg);
}
.RobotControl .car-direction .car-center-but {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 30px;
  top: 30px;
  border: 2px solid rgb(190, 230, 230);
  border-radius: 50%;
}
.RobotControl .car-direction .car-center-but-disabled {
  background-color: #7c9eac;
  cursor: not-allowed;
}
.RobotControl .car-direction .car-center-but-img {
  width: 30px;
  height: 30px;
  margin-left: 13px;
  margin-top: 13px;
}
.RobotControl .car-direction .car-direction-but:hover,
.RobotControl .car-direction .car-center-but:hover {
  background: rgb(90, 110, 130);
}
.RobotControl .car-direction .car-direction-but-disabled:hover,
.RobotControl .car-direction .car-center-but-disabled:hover {
  background-color: #7c9eac;
  cursor: not-allowed;
}
/*  */
.RobotControl .holder-area {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 1px solid rgb(186, 233, 216);
  overflow: hidden;
}
.RobotControl .holder-title {
  width: 100%;
  height: 26px;
  display: block;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.RobotControl .holder-direction {
  width: 120px;
  height: 120px;
  position: relative;
  margin: auto auto;
  top: calc(50% - 60px - 30px);
}
.RobotControl .holder-direction .holder-direction-but {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 60px 0 0 0;
  background-color: rgb(16, 156, 180);
  border: 1px solid rgb(186, 233, 216);
}
.RobotControl .holder-direction .holder-direction-but-disabled {
  background-color: #7c9eac;
  cursor: not-allowed;
}
.RobotControl .holder-direction .holder-but-text {
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  text-align: center;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RobotControl .holder-direction .holder-but-text-disabled {
  color: #dfdfdf;
}
.RobotControl .holder-direction .holder-left-but {
  top: 25%;
  left: -10%;
  transform: rotate(-45deg);
}
.RobotControl .holder-direction .holder-left-but-text {
  transform: rotate(45deg);
}
.RobotControl .holder-direction .holder-top-but {
  top: -10%;
  left: 25%;
  transform: rotate(45deg);
}
.RobotControl .holder-direction .holder-top-but-text {
  transform: rotate(-45deg);
}
.RobotControl .holder-direction .holder-right-but {
  top: 25%;
  left: 60%;
  transform: rotate(135deg);
}
.RobotControl .holder-direction .holder-right-but-text {
  transform: rotate(-135deg);
}
.RobotControl .holder-direction .holder-bottom-but {
  top: 60%;
  left: 25%;
  transform: rotate(-135deg);
}
.RobotControl .holder-direction .holder-bottom-but-text {
  transform: rotate(135deg);
}
.RobotControl .holder-direction .holder-center-but {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 25px;
  background-color: rgb(16, 156, 180);
  text-align: center;
}
.RobotControl .holder-direction .holder-center-left {
  width: 50%;
  height: 100%;
  /* position: absolute; */
  border-radius: 25px 0 0 25px;
  background-color: rgb(16, 156, 180);
  border: 1px solid rgb(186, 233, 216);
  float: left;
}
.RobotControl .holder-direction .holder-center-left-disabled {
  background-color: #7c9eac;
  cursor: not-allowed;
}
.RobotControl .holder-direction .holder-center-right {
  width: 50%;
  height: 100%;
  /* position: absolute; */
  border-radius: 0 25px 25px 0;
  background-color: rgb(16, 156, 180);
  border: 1px solid rgb(186, 233, 216);
  float: right;
}
.RobotControl .holder-direction .holder-center-right-disabled {
  background-color: #7c9eac;
  cursor: not-allowed;
}
.RobotControl .holder-direction .holder-center-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RobotControl .holder-direction .holder-center-text-disabled {
  color: #dfdfdf;
}
.RobotControl .holder-direction .holder-center-text-up {
  display: block;
  width: 100%;
  height: 33px;
  line-height: 33px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}
.RobotControl .holder-direction .holder-center-text-bot {
  display: block;
  width: 100%;
  height: 30px;
  font-size: 9px;
  color: #fff;
  text-align: center;
}
.RobotControl .holder-direction .holder-direction-but:hover,
.RobotControl .holder-direction .holder-center-left:hover,
.RobotControl .holder-direction .holder-center-right:hover {
  background: rgb(90, 110, 130);
}
.RobotControl .holder-direction .holder-direction-but-disabled:hover,
.RobotControl .holder-direction .holder-center-left-disabled:hover,
.RobotControl .holder-direction .holder-center-right-disabled:hover {
  background-color: #7c9eac;
  cursor: not-allowed;
}
/*  */
.RobotControl ul {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  list-style-type: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.RobotControl .four-li {
  width: calc(100% - 11px);
  height: 200px;
  overflow: hidden;
  background: rgb(250, 250, 250);
  margin: 5px;
  float: left;
  border-radius: 5px;
  overflow: hidden;
}
.RobotControl .four-li .four-li-img-consist {
  width: 40%;
  height: 100%;
  min-height: 150px;
  margin-left: 20px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
}
.RobotControl .four-li .four-li-image {
  width: 100%;
}
.RobotControl .four-li .four-li-right {
  width: calc(60% - 56px);
  height: 100%;
  float: left;
  margin: 0px 5px 0px 30px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.RobotControl .four-li-right .info-name {
  width: 85px;
  font-size: 14px;
  line-height: 25px;
  float: left;
}
.RobotControl .four-li-right .info-value {
  width: calc(100% - 85px);
  float: left;
  overflow: hidden;
}
.RobotControl .four-li-right .info-value span {
  width: 100%;
  height: 100%;
  display: block;
}
.RobotControl .picture-button {
  margin-left: 0px;
  margin-right: 10px;
}
.RobotControl .el-dialog-redefine .el-dialog__header {
  padding: 20px 20px 10px;
}
.RobotControl .el-dialog-redefine .el-dialog__body {
  padding: 20px 20px;
}
.RobotControl .dialog-prompt-icon {
  width: 30px;
  height: 30px;
  margin: 1px 5px;
}
.urgency-task-loading {
  font-size: 39px;
}
.urgency-task-loading .el-loading-spinner .el-loading-text {
  font-size: 27px;
}

.div-title .car-title-selected {
  float: left;
  margin-left: 10px;
}

.div-title .el-input--mini .el-input__inner {
  height: 26px;
  line-height: 26px;
}

.div-title .el-input__inner {
  min-width: 30px;
  padding: 0 5px;
  width: 60px;
}

.div-title .title-left-button {
  float: right;
  width: 40px;
  height: 25px;
  padding: 0 0;
  margin: 0 10px 0 20px;
  background-color: rgb(16, 156, 180);
  font-size: 12px;
  color: #fff;
}

.RobotControl .div-title .title-left-button-check {
  background-color: rgb(180, 130, 60);
}

.RobotControl .div-title .title-left-button-disable {
  background-color: #7c9eac;
  color: #dfdfdf;
  cursor: not-allowed;
}

.RobotControl .angle-area {
  margin-top: 5px;
  margin-left: 5px;
  height: 27px;
  font-size: 13px;
  text-align: center;
}

.RobotControl .number-input {
  width: 76px;
  line-height: 25px;
}

.RobotControl .el-input-number--small .el-input-number__decrease,
.el-input-number--small .el-input-number__increase {
  width: 20px;
}

.RobotControl .el-input--small .el-input__inner {
  height: 27px;
  line-height: 27px;
  padding-left: 20px;
  padding-right: 20px;
}

.RobotControl .maptalks-msgBox a.maptalks-close {
  top: 0px;
  right: 1px;
}
</style>